angularjs中的password-check指令
angularjs中的password-check指令
提问于 2012-12-23 23:34:49
我正在编写一个密码验证指令：
Directives.directive("passwordVerify",function(){
return {
require:"ngModel",
link: function(scope,element,attrs,ctrl){
ctrl.$parsers.unshift(function(viewValue){
var origin = scope.$eval(attrs["passwordVerify"]);
if(origin!==viewValue){
ctrl.$setValidity("passwordVerify",false);
return undefined;
}else{
ctrl.$setValidity("passwordVerify",true);
return viewValue;
}
});
}
};
});html：
<input data-ng-model='user.password' type="password" name='password' placeholder='password' required>
<input data-ng-model='user.password_verify' type="password" name='confirm_password' placeholder='confirm password' required data-password-verify="user.password">给定表单中的两个密码字段，如果两个密码值相等，则受指令影响的字段有效。问题是它是单向的(即当我在password-verify字段中输入密码时)。但是，当原始密码字段更新时，密码验证将不会生效。
你知道我怎么才能有一个“双向绑定验证”吗？
回答 16
Stack Overflow用户
发布于 2013-10-24 15:32:02
不需要为此创建单独的指令。已经有一个build in Angular UI password validation tool。有了这个，你可以这样做：
<input name="password" required ng-model="password">
<input name="confirm_password"
ui-validate=" '$value==password' "
ui-validate-watch=" 'password' ">
Passwords match? {{!!form.confirm_password.$error.validator}}Stack Overflow用户
发布于 2013-05-14 13:59:41
我在没有指令的情况下做到了这一点。
<input type="password" ng-model="user.password" name="uPassword" required placeholder='Password' ng-minlength="3" ng-maxlength="15" title="3 to 15 characters" />
<span class="error" ng-show="form.uPassword.$dirty && form.uPassword.$error.minlength">Too short</span>
<span ng-show="form.uPassword.$dirty && form.uPassword.$error.required">Password required.</span><br />
<input type="password" ng-model="user.confirmpassword" name="ucPassword" required placeholder='Confirm Password' ng-minlength="3" ng-maxlength="15" title="3 to 15 characters" />
<span class="error" ng-show="form.ucPassword.$dirty && form.ucPassword.$error.minlength">Too short</span>
<span ng-show="form.ucPassword.$dirty && form.ucPassword.$error.required">Retype password.</span>
<div ng-show="(form.uPassword.$dirty && form.ucPassword.$dirty) && (user.password != user.confirmpassword)">
<span>Password mismatched</span>
</div>Stack Overflow用户
发布于 2014-07-30 16:19:06
从angular 1.3.0-beta12开始，无效的输入不会写入ngModel，所以你不能像这里看到的那样观察然后验证：http://plnkr.co/edit/W6AFHF308nyKVMQ9vomw?p=preview。引入了一个新的验证器管道，您可以附加到该管道来实现相同的功能。
实际上，我已经为常见的额外验证器创建了一个bower组件：https://github.com/intellix/angular-validators，其中包括以下内容。
angular.module('validators').directive('equals', function() {
return {
restrict: 'A',
require: '?ngModel',
link: function(scope, elem, attrs, ngModel)
{
if (!ngModel) return;
attrs.$observe('equals', function() {
ngModel.$validate();
});
ngModel.$validators.equals = function(value) {
return value === attrs.equals;
};
}
};
});
angular.module('validators').directive('notEquals', function() {
return {
restrict: 'A',
require: '?ngModel',
link: function(scope, elem, attrs, ngModel)
{
if (!ngModel) return;
attrs.$observe('notEquals', function() {
ngModel.$validate();
});
ngModel.$validators.notEquals = function(value) {
return value === attrs.notEquals;
};
}
};
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14012239
复制相关文章
相似问题