码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS:添加检查密码输入是否一致的功能

时间:2014-08-20 12:26:42      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   for   ar   2014   

利用AngularJS的directive,我们可以很方便的实现检验功能。代码如下:

 1 // 密码验证directive
 2 ftitAppModule.directive(‘pwCheck‘, [function () {
 3     return {
 4         require: ‘ngModel‘,
 5         link: function (scope, elem, attrs, ctrl) {
 6             var firstPassword = ‘#‘ + attrs.pwCheck;
 7             elem.add(firstPassword).on(‘keyup‘, function () {
 8                 scope.$apply(function () {
 9                     var v = elem.val()===$(firstPassword).val();
10                     ctrl.$setValidity(‘pwmatch‘, v);
11                 });
12             });
13         }
14     }
15 }]);

Demo html代码(feedback部分请参考http://www.cnblogs.com/ilovewindy/p/3795993.html):

 1 <div class="form-group">
 2     <label for="userPassword">密码</label>
 3     <input type="password" class="form-control" id="userPassword" name="userPassword"
 4            placeholder="请输入密码" ng-model="selectedUser.userPassword">
 5 </div>
 6 <div class="form-group has-feedback"
 7      ng-class="{‘has-success‘ : !usrMgrForm.confirmPassword.$pristine && usrMgrForm.confirmPassword.$valid,
 8                 ‘has-error‘ : !usrMgrForm.confirmPassword.$pristine && usrMgrForm.confirmPassword.$invalid }">
 9     <label for="confirmPassword">确认密码</label>
10     <input type="password" class="form-control" id="confirmPassword" name="confirmPassword"
11            placeholder="请再次输入密码" ng-model="selectedUser.confirmPassword" pw-check="userPassword">
12     <div ng-show="!usrMgrForm.confirmPassword.$pristine && tagName.confirmPassword.$valid">
13         <span class="glyphicon glyphicon-ok form-control-feedback"></span>
14     </div>
15     <div ng-show="!usrMgrForm.confirmPassword.$pristine && usrMgrForm.confirmPassword.$invalid">
16         <span class="glyphicon glyphicon-remove form-control-feedback"></span>
17     </div>
18 </div>

效果如下:

bubuko.com,布布扣

AngularJS:添加检查密码输入是否一致的功能,布布扣,bubuko.com

AngularJS:添加检查密码输入是否一致的功能

标签:style   blog   http   color   io   for   ar   2014   

原文地址:http://www.cnblogs.com/ilovewindy/p/3924172.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!