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>

效果如下：