首页 / 操作系统 / Linux / AngularJS 添加检查密码输入是否一致的功能

利用AngularJS的directive，我们可以很方便的实现检验功能。代码如下：// 密码验证directive
ftitAppModule.directive（"pwCheck", [function （） {
    return {
        require: "ngModel",
        link: function （scope, elem, attrs, ctrl） {
            var firstPassword = "#" + attrs.pwCheck;
            elem.add（firstPassword）.on（"keyup", function （） {
                scope.$apply（function （） {
                    var v = elem.val（）===$（firstPassword）.val（）;
                    ctrl.$setValidity（"pwmatch", v）;
                }）;
            }）;
        }
    }
}]）;Demo html代码（feedback部分请参考 http://www.linuxidc.com/Linux/2015-01/112324.htm  ）：<div class="form-group">
    <label for="userPassword">密码</label>
    <input type="password" class="form-control" id="userPassword" name="userPassword"
         placeholder="请输入密码" ng-model="selectedUser.userPassword">
</div>
<div class="form-group has-feedback"
   ng-class="{"has-success" : ！usrMgrForm.confirmPassword.$pristine && usrMgrForm.confirmPassword.$valid,
                "has-error" : ！usrMgrForm.confirmPassword.$pristine && usrMgrForm.confirmPassword.$invalid }">
    <label for="confirmPassword">确认密码</label>
    <input type="password" class="form-control" id="confirmPassword" name="confirmPassword"
         placeholder="请再次输入密码" ng-model="selectedUser.confirmPassword" pw-check="userPassword">
    <div ng-show="！usrMgrForm.confirmPassword.$pristine && tagName.confirmPassword.$valid">
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
    <div ng-show="！usrMgrForm.confirmPassword.$pristine && usrMgrForm.confirmPassword.$invalid">
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    </div>
</div>效果如下： AngularJS权威教程 清晰PDF版  http://www.linuxidc.com/Linux/2015-01/111429.htm希望你喜欢，并分享我的工作~带你走近AngularJS系列：

1. 带你走近AngularJS - 基本功能介绍 http://www.linuxidc.com/Linux/2014-05/102140.htm
2. 带你走近AngularJS - 体验指令实例 http://www.linuxidc.com/Linux/2014-05/102141.htm
3. 带你走近AngularJS - 创建自定义指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中对控制器进行单元测试 http://www.linuxidc.com/Linux/2013-12/94166.htm在 AngularJS 应用中通过 JSON 文件来设置状态 http://www.linuxidc.com/Linux/2014-07/104083.htmAngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htmAngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据 http://www.linuxidc.com/Linux/2014-07/104402.htmAngularJS 的详细介绍：请点这里
AngularJS 的下载地址：请点这里本文永久更新链接地址：http://www.linuxidc.com/Linux/2015-01/112323.htm