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);
})
})
}
}
})
