Angularjs 通过directive实现验证两次输入是否一致的功能

实现效果:

 1> 当输入确认密码时验证:  

2> 当输入密码时验证:

  

实现步骤:

1.页面代码:  

<input class="form-control" type="password" id="password" name="password"
                                                   ng-model="user.password"
                                                   match-check="confrimPassword|confrimPassword">

input class="form-control" type="password" id="confrimPassword"
                                                   name="confrimPassword"
                                                   ng-model="user.confrimPassword"
                                                   match-check="password|confrimPassword" onpaste="return false">
                                            <span class=" error"
                                                  ng-show="!form.password.$pristine && !form.confrimPassword.$pristine && form.confrimPassword.$error.match">This does not match the 'Password' entered above.  Please re-enter your password.</span>
View Code

2.自定义验证指令

"use strict";

/**
 * Created by jerry_yang on 2015/11/27.
 * user defined match check directive
 */
angular.module('bet.match', [])
    .directive('matchCheck', matchCheck);

function matchCheck() {
    return {
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            var matchCheck = attrs.matchCheck;
            var param = matchCheck.split('|');
            var inputCtr = '#' + param[0];
            elem.bind(inputCtr).on('keyup', function () {
                scope.$apply(function () {
                    var v = elem.val() === $(inputCtr).val();
                    scope.form[param[1]].$setValidity('match', v);
                });
            });
        }
    }
}
View Code
原文地址:https://www.cnblogs.com/ywblog/p/5039823.html