实现效果:
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>
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[];
elem.bind(inputCtr).on('keyup', function () {
scope.$apply(function () {
var v = elem.val() === $(inputCtr).val();
scope.form[param[]].$setValidity('match', v);
});
});
}
}
}