`

angularjs 密码一致性校验

阅读更多

angularjs 校验密码字段一致性 

Js代码  收藏代码
  1. directives.directive('pwCheck'function () {  
  2.     return {  
  3.         require: 'ngModel',  
  4.         link: function (scope, elem, attrs, ctrl) {  
  5.             var firstPassword = '#' + attrs.pwCheck;  
  6.             // 网上好多例子都掉了$(elem) 美元符号和括号
  7.             $(elem).add(firstPassword).on('keyup'function () {  
  8.                 scope.$apply(function () {  
  9.                     alert(elem.val());  
  10.                     var v = elem.val()===$(firstPassword).val();  
  11.                     ctrl.$setValidity('pwmatch',v);  
  12.                 });  
  13.             });  
  14.         }  
  15.     };  
  16. });  //经测试,$(elem)可以用elem替代



Html代码  收藏代码
  1. <div class="form-group" ng-class="{'has-error': developerForm.password.$dirty && developerForm.password.$invalid}">  
  2.                    <div class="col-sm-12">  
  3.                        <input type="password" ng-model="developer.password" name="password" id="password" class="form-control" placeholder="预设密码" required>  
  4.                    </div>  
  5.                    <p class="text-warning help-block" ng-show="developerForm.password.$dirty && developerForm.password.$invalid">  
  6.                        <small ng-show="developerForm.password.$error.required">预设密码必填!!</small>  
  7.                    </p>  
  8.                </div>  
  9.                <div class="form-group" ng-class="{'has-error': developerForm.rePassword.$dirty && developerForm.rePassword.$invalid}">  
  10.                    <div class="col-sm-12 ">  
  11.                        <input type="password" ng-model="developer.rePassword" name="rePassword" class="form-control" placeholder="确认密码" pw-check="password" required>  
  12.                    </div>  
  13.                    <p class="text-warning help-block" ng-show="developerForm.rePassword.$dirty && developerForm.rePassword.$invalid">  
  14.                        <small ng-show="developerForm.rePassword.$error.required">确认密码必填!!</small>  
  15.                        <small ng-show="developerForm.rePassword.$error.pwmatch">预设密码和确认密码不一致!!</small>  
  16.                    </p>  
  17.                </div>  



http://angularjs4u.com/directives/angularjs-check-passwords-match-directive/ 

 

本文来源于:http://tramp-zzy.iteye.com/blog/2179274

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics