AngularJS 表单验证

AngularJS表单验证

一、表单验证的4种状态

1、$invalid：表示表单元素的验证（如required、ng-minlength等）处于invalid状态。

2、$valid：与$invalid相反的状态，表示表单元素的验证正确，处于valid状态。

3、$pristine：表示表单元素未曾输入过值，处于全新的状态。

4、$dirty：与$pristine相反，表示表单元素已经输入过值，处于dirty状态。

5、$error：表示表单元素输入的值不符合验证，处于error的状态。

二、表单内置验证指令

1、required：表示该元素是必须的。

2、ng-required：该指令与required最大的区别是，它可以通过传入Boolean值来设置表单元素是否为required。

3、ng-minlength：设置表单元素的最小值。

4、ng-maxlength：设置表单元素的最大值。

5、ng-pattern：可以通过传入正则表达式对表单进行验证

三、显示错误信息

　　根据表单或者表单元素的状态（$invalid,$valid,$dirty,$pristine），AngularJS会为其添加想要的CSS类（ng-invalid,ng-valid,ng-dirty,ng-pristine）

因此，可以通过控制这些CSS类先控制错误信息的样式

　　要想输入表单错误信息，只需要通过以下这种方式

　　　　　　　　<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class=" iconfont icon-register icon-key"></span></div>
<input type="password" name="password" ng-model="user.password" class="form-control"
placeholder="请输入登录密码"
required
minlength="6"
ng-pattern="/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/"/>
</div>
<div  ng-show="registerForm.password.$invalid && registerForm.password.$dirty">
<span ng-show="registerForm.password.$error.minlength">密码不能少于6位</span>
<span ng-show="registerForm.password.$error.pattern">密码必须由数字和字母组成</span>
<span ng-show="registerForm.password.$error.required">密码不能为空</span>
</div>
</div>

四、自定义表单验证

1、自定义指令

2、在指令中完成数据判断

3、return

4、在表单元素中应用该指令

最后附上一个完整的用户注册表单。其中包括基本表单验证如：required,ng-minlength,ng-pattern。也包括自定义指令验证：验证两次密码是否输入一致，验证用户名是否唯一（需要后台服务支持）。

<div ng-controller="RegisterCtrl" class="row register-container">

<div class="col-xs-7 register-banner"></div>
<div class="col-xs-5">
<form name="registerForm" class="registerForm" novalidate ng-submit="register(user)">
<div class="title">欢迎注册，和我们一起甜蜜生活</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class=" iconfont icon-register icon-phone"></span></div>
<input type="text" name="username" class="form-control" placeholder="请输入手机号码"
ng-model="user.username"
maxlength="11" required ng-pattern="/1[3|5|7|8|][0-9]{9}/" unique/>
</div>
<div class="form-error" ng-show="registerForm.username.$invalid && registerForm.username.$dirty">
<span ng-show="registerForm.username.$error.required">手机号不能为空</span>
<span ng-show="registerForm.username.$error.pattern">请输入正确的手机号码</span>
<span ng-show="registerForm.username.$error.unique">该手机号已存在</span>
</div>
</div>

<div class="form-group row">
<div class="col-xs-6 input-sms-code">
<input type="text" value="" name="sms_code" class="form-control" ng-model="user.sms_code"
placeholder="请输入6位验证码" required ng-maxlength="6" maxlength="6"/>
</div>
<div class="col-xs-6 btn-sms-code">
<a class="btn btn-default btn-register" ng-click="getVerifyCode(user.username)"
ng-disabled="sms_code_status || registerForm.username.$invalid">{{sms_code_content}}</a>
</div>
</div>

<div class="form-error" ng-show="myForm.sms_code.$invalid && registerForm.username.$dirty ">
<span ng-show="myForm.sms_code.$error.required">请输入验证码</span>
</div>

<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class=" iconfont icon-register icon-key"></span></div>
<input type="password" name="password" ng-model="user.password" class="form-control"
placeholder="请输入登录密码"
required
minlength="6"
ng-pattern="/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/"/>
</div>
<div class="form-error" ng-show="registerForm.password.$invalid && registerForm.password.$dirty">
<span ng-show="registerForm.password.$error.minlength">密码不能少于6位</span>
<span ng-show="registerForm.password.$error.pattern">密码必须由数字和字母组成</span>
<span ng-show="registerForm.password.$error.required">密码不能为空</span>
</div>
</div>

<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class=" iconfont icon-register icon-key"></span></div>
<input type="password" name="repeat_password" class="form-control"
ng-model="user.repeat_password"
placeholder="请再次输入密码" required pw-check match="user.password"/>
</div>
<div class="form-error" ng-show="registerForm.repeat_password.$invalid && registerForm.repeat_password.$dirty">
<span ng-show="registerForm.repeat_password.$error.required">密码不能为空</span>
<span ng-show="registerForm.$error.matchError">两次密码不一样</span>
</div>
</div>

<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class=" iconfont icon-register icon-yonghu"></span></div>
<input type="text" name="nick_name" class="form-control" ng-model="user.nick_name"
placeholder="请输入昵称"
required/>
</div>
<div class="form-error" ng-show="registerForm.nick_name.$invalid && registerForm.nick_name.$dirty">
<span ng-show="registerForm.nick_name.$error.required">昵称不能为空</span>
</div>
</div>

<div class="checkbox">
<label>
<input type="checkbox"> 同意  <a class="protocol" >添米用户注册协议</a> 和 <a
class="protocol">添米投资服务协议</a>
</label>
</div>
<input type="submit" value="注册" class="btn btn-register" ng-disabled="registerForm.$invalid"/>
{{result}}
</form>
</div>
</div>

两次密码一致性检查指令

.directive('pwCheck', function () {
return{
require:'ngModel',
scope:{
password:'=match'
},
link:function(scope, element, attrs, ngModel){
scope.$watch('password', function(){
ngModel.$setValidity('matchError', element.val() === scope.password);
})
element.on('keyup', function(){
scope.$apply(function(){
ngModel.$setValidity('matchError', element.val() === scope.password);
})
})
}
}
})