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

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部分请参考   ）：

<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版 

希望你喜欢，并分享我的工作~带你走近AngularJS系列：

1. 带你走近AngularJS - 基本功能介绍
2. 带你走近AngularJS - 体验指令实例
3. 带你走近AngularJS - 创建自定义指令

如何在 AngularJS 中对控制器进行单元测试

在 AngularJS 应用中通过 JSON 文件来设置状态

AngularJS 之 Factory vs Service vs Provider

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据

AngularJS 的详细介绍：请点这里
AngularJS 的下载地址：请点这里

本文永久更新链接地址：