AngularJS自定义表单验证

前端之家收集整理的这篇文章主要介绍了AngularJS自定义表单验证前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

点击打开链接

Angular实现了大部分常用的HTML5的表单控件的类型(text,number,url,email,date,radio,checkBox),也实现了很多指令做为验证(required,pattern,minlength,maxlength,min,max)。

自定义的指令中,我们可以添加我们的验证方法ngModelController$validators对象上。为了取得这个controller对象,我们需要requirengModel指令。

$validators对象上的每个方法都接收modelValueviewValue两个值做为参数。在你绑定的验证方法返回一个值(true,false)之后,Angular会在内部调用$setValidity方法。验证会在每一次输入框的值改变($setViewValue调用)或者模型的值改变。验证发生在$parsers和$formatters成功运行之后,验证不通过的项会做为ngModelController.$error属性存储起来。

另外,在这个controller对象上,还有一个$asyncValidators对象,如果你的验证是异步的,则需要加验证附加在这个对象上,比如说用户注册时输入手机号,我们需要在后端验证该手机号是否已经注册,这个验证方法必须return一个promise对象,然后在验证通过时调用延迟对象的resolve,失败时调用reject,还未完成的异步的验证存储在ngModelController.$pending中。


例如(注意其中的user对象,只有验证通过了,才会将值绑定到模型上):

[html] view plain copy
  1. <formname="register_form"ng-submit="save()">
  2. divclass="form-group">
  3. labelfor="phoneNumber"手机号(不能重复):
  4. </labelinputtype="text"class="form-control"ng-model="user.phoneNumber"id="phoneNumber"name="phoneNumber"requiredphonediv"username"用户名(必须大于五位):
  5. "user.username"id="username"requiredusernamebuttonclass="btnbtn-blockbtn-primary"type="submit">提交buttonformh3>用户对象pre{{user|json}}
  6. >

[javascript] copy
    'usestrict';
  1. angular.module('app',[])
  2. .directive('phone',function($q,$http){
  3. return{
  4. require:'ngModel',
  5. link:function(scope,ele,attrs,ctrl){
  6. ctrl.$asyncValidators.phone=function(modelValue,viewValue){
  7. vard=$q.defer();
  8. $http.get('phone.json')
  9. .success(function(phoneList){
  10. if(phoneList.indexOf(parseInt(modelValue))>=0){
  11. d.reject();
  12. }else{
  13. d.resolve();
  14. }
  15. });
  16. returnd.promise;
  17. }
  18. })
  19. 'username',0); background-color:inherit">ctrl.$validators.username=if(modelValue){
  20. returnmodelValue.length>5?true:false;
  21. };
  22. return})

phone.json

copy

    [
  1. 13758262732,
  2. 15658898520,
  3. 13628389818,0); background-color:inherit">18976176895,0); background-color:inherit">13518077986
  4. ]
效果

下面一个完整的用户注册的表单验证:

html:

copy

    "register_form"novalidate>用户名:
  1. <!--ng-pattern="/PATTERN/"确保输入项符合正则-->
  2. "text"id="username"ng-model="user.username"class="form-control"name="username"requiredng-pattern="/^[^#]*$/"spanclass="glyphiconglyphicon-okright"ng-show="register_form.username.$valid">span"alertalert-danger"ng-show="register_form.username.$error.pattern"strong>请注意!用户名不能带#号。
  3. "register_form.username.$error.required&&register_form.username.$touched"用户名不能为空。
  4. "_password">密码:<!--ng-minlength="num"让密码不能小于最小长度-->
  5. "password"id="_password"ng-model="data._password"class="form-control"requiredng-minlength="8"name="register_form._password.$valid""register_form._password.$error.minlength&&register_form._password.$touched"密码长度不能少于八位。
  6. "register_form._password.$error.required&&register_form._password.$touched"密码不能为空。
  7. "password">确认密码:"password"ng-model="user.password"class="password"requiredpwd-repeat"register_form.password.$valid""register_form.password.$error.pwdRepeat&&register_form.password.$touched"两次输入的密码不相同。
  8. "register_form.password.$error.required&&register_form.password.$touched"请再次输入密码。
  9. "phone">手机号:"row""col-sm-10""num"id="phone"ng-model="user.phone"name="phone"class="11"ng-maxlength="11"phone"col-sm-2""btnbtn-default"type="button"ng-disabled="register_form.phone.$invalid">发送验证码"register_form.phone.$valid""register_form.phone.$error.phone"该手机号已注册过,可直接登录
  10. "register_form.phone.$touched&&!register_form.phone.$error.phone&&(register_form.phone.$error.required||register_form.phone.$error.minlength||register_form.phone.$error.maxlength)"请输入正确的手机号。
  11. "code">验证码:"code"ng-model="user.code"class="code"required"register_form.code.$valid"<!--在表单不合法时禁用提交按钮-->
  12. "submit"ng-disabled="register_form.$invalid"ng-click=>
js:

copy

    .controller('myCtrl',153); font-size:14px; word-wrap:normal; border:none; background-color:inherit">function($scope){
  1. $scope.data={};
  2. $scope.save=function(){
  3. alert('保存成功!')
  4. //判断手机号是否重复
  5. return{
  6. vard=$q.defer();
  7. 'phone.json')
  8. function(phoneList){
  9. if(phoneList.indexOf(parseInt(modelValue))>=0){
  10. d.reject();
  11. else{
  12. d.resolve();
  13. });
  14. returnd.promise;
  15. })
  16. //验证两次输入的密码是否相同的自定义验证
  17. 'pwdRepeat',153); font-size:14px; word-wrap:normal; border:none; background-color:inherit">function(){
  18. ctrl.$validators.pwdRepeat=function(modelValue){
  19. //当值为空时,通过验证,因为有required
  20. if(ctrl.$isEmpty(modelValue)){
  21. true;
  22. returnmodelValue===scope.data._password?})
css:

[css] copy
    .form-group{
  1. position:relative;
  2. .right{
  3. position:absolute;
  4. right:10px;
  5. top:34px;
  6. color:green;
  7. }
phone.json:

copy

    ]
原文链接:https://www.f2er.com/angularjs/144988.html

猜你在找的Angularjs相关文章