表单校验

表单校验校验表单输入校验,通过对w5c-validator-angular示例)的修改来实现

一 使用方法:

<form action="#" class="form-horizontal w5c-form" w5c-form-validate novalidate name="validateForm">
	    <div class="form-body">
	     
	   <div class="form-group">
	     
	     
	  <label class="col-md-3 control-label">用户编号</label>
	     
	     
	   <div class="col-md-4">
	     
	     
	     
	 <input type="text" class="form-control" name="userCode" ng-model="user.userCode" required>
	     
	     
	  </div>
	     
	   </div>
	     
	   <div class="form-group">
	     
	     
	  <label class="col-md-3 control-label">用户姓名</label>
	     
	     
	   <div class="col-md-4">
	     
	     
	     
	 <input type="text" class="form-control" name="userName" ng-model="user.userName"     
	     
	     
	     
	    required ed-validate="name" ng-maxlength="10">
	     
	     
	  </div>
	     
	   </div>
	     
	   <div class="form-group">
	     
	     
	  <label class="col-md-3 control-label">性别</label>
	     
	     
	   <div class="col-md-4">
	     
	     
	     
	 <select class="form-control" name="gender" ng-model="user.gender"     
	     
	     
	     
	     
	ng-options="opt.value as opt.name for opt in options.gender" required></select>
	     
	     
	  </div>
	     
	   </div>
	     
	   <div class="form-group">
	     
	     
	  <label class="col-md-3 control-label">手机号码</label>
	     
	     
	   <div class="col-md-4">
	     
	     
	     
	 <input type="text" class="form-control" ng-model="user.telephone">
	     
	     
	  </div>
	     
	   </div>
	     
	   <div class="form-group" ng-show="!user.userId && settings.deptPosEnable">
	     
	     
	  <label class="col-md-3 control-label">所属岗位</label>
	     
	     
	   <div class="col-md-4">
	     
	     
	     
	 <input type="text" class="form-control" ng-model="deptPos.name" readonly>
	     
	     
	  </div>
	     
	   </div>
	     
	   <div class="form-group">
	     
	     
	  <label class="col-md-3 control-label">状态</label>
	     
	     
	   <div class="col-md-4">
	     
	     
	     
	 <select class="form-control" ng-model="user.userState"     
	     
	     
	     
	     
	ng-options="opt.value as opt.name for opt in options.userstate"></select>
	     
	     
	  </div>
	     
	   </div>
	     
	   <div class="form-group">
	     
	     
	  <label class="col-md-3 control-label">用户描述</label>
	     
	     
	   <div class="col-md-4">
	     
	     
	     
	 <textarea class="form-control" rows="3" ng-model="user.remark"></textarea>
	     
	     
	  </div>
	     
	   </div>
	    </div>
	    <div class="form-actions">
	     
	   <div class="row">
	     
	     
	  <div class="col-md-offset-3 col-md-4">
	     
	     
	     
	 <button type="button" class="btn green" w5c-form-submit="userGrid.save()"><i     
	     
	     
	     
	     
	class="fa fa-save"></i>
	保存     
	     
	     
	  </button>
	     
	     
	     
	 <button type="button" class="btn default" ng-click="userGrid.cancel();validateForm.reset();"><i     
	     
	     
	     
	     
	class="fa fa-times"></i>
	取消     
	     
	     
	  </button>
	     
	     
	  </div>
	     
	   </div>
	    </div>
	</form>
	

有如下要求:

  • form节点需要增加class="w5c-form",并增加w5c-form-validate和novalidate属性
  • form节点和需要校验的节点都必须要有name属性,其中form的name值在当前控制器中有一个reset()方法,用来清除校验结果
  • 提交事件由ng-click改为w5c-form-submit

二 支持类型:

其中AngularJS原生支持很多种验证规则,比如:require(必填项),email,pattern(正则),maxlength,minlength,number,url,max,min,由于原生的maxlength在大多知道的长度后不允许继续输入,所以maxlength,minlength使用ng-maxlength,ng-minlength代替。

此外,还提供以下自定义校验,通过ed-validate自定义属性来指定,比如上例中的“用户姓名”。

  • phone// 电话号码
  • mobile// 手机号码
  • phoneOrMobile手机或电话
  • integer// 整数
  • chinese// 中文
  • english// 英语
  • username// 用户名
  • name// 姓名,可以是中文或英文
  • email// 电子邮件

三 自定义校验:

如果以上不能满足,可以自定义校验:

App.directive('menuName', function() {     
	return {     
	    restrict:"A",     
	    require:"ngModel",     
	    link:function(scope, ele, attrs, ngModelController){     
	     
	   ngModelController.$parsers.push(function(viewValue){     
	     
	     
	  var validate = true;// 这里写自己的校验规则,当ng-model绑定的值改变时即能进行校验     
	     
	     
	  ngModelController.$setValidity('pattern', validate);     
	     
	     
	  $(elem).attr('patternMsg', '自定义校验失败提示');// 如果需要在这里动态提示的话,下面具体讲     
	     
	     
	  return viewValue;     
	     
	   });     
	    }     
	}; }); 

对于上面的示例,使用方式如下:

<input type="text" menu-name class="form-control" name="menuName" ng-model="menu.menuName" required patternMsg="标题格式不正确!">
	

四 校验失败提示信息:

对于默认提示信息如果不能满足,可以通过自定义属性patternMsg来指定。

五 注意:

取消编辑时,需要重置form的校验状态,如用法示例中的:validateForm.reset(),这里validateForm为form的name值。

版权及转载说明

本站原创、转载文章欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区

本站转载文章版权归原作者所有,如发现本站文章涉嫌侵权请点击「联系我们」反馈,本站将给予删除