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

感谢作者（http://blog.brunoscopelliti.com/angularjs-directive-to-check-that-passwords-match）

利用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.cnblogs.com/ilovewindy/p/3795993.html）：

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

效果如下：