angularjs 中的密码检查指令 [英] password-check directive in angularjs
问题描述
我正在编写密码验证指令:
Directives.directive("passwordVerify",function(){返回 {要求:ngModel",链接:功能(范围,元素,属性,ctrl){ctrl.$parsers.unshift(function(viewValue){var origin = scope.$eval(attrs["passwordVerify"]);if(origin!==viewValue){ctrl.$setValidity("passwordVerify",false);返回未定义;}别的{ctrl.$setValidity("passwordVerify",true);返回视图值;}});}};});
html:
<input data-ng-model='user.password_verify' type="password" name='confirm_password' placeholder='confirm password' required data-password-verify="user.password">
给定表单中的 2 个密码字段,如果两个密码值相等,则受指令影响的字段有效.问题是它以一种方式工作(即当我在密码验证字段中输入密码时).但是,当原始密码字段被更新时,密码验证不会生效.
知道如何进行双向绑定验证"吗?
这应该可以解决:
查看:
<表格名称='表格'><input data-ng-model='user.password' type="password" name='password' placeholder='password' required><div ng-show="form.password.$error.required">必填字段<input ng-model='user.password_verify' type="password" name='confirm_password' placeholder='confirm password' required data-password-verify="user.password"><div ng-show="form.confirm_password.$error.required">必填字段!
<div ng-show="form.confirm_password.$error.passwordVerify">字段不相等!
</表单
指令
var app = angular.module('myApp', []);app.directive("passwordVerify", function() {返回 {要求:ngModel",范围: {密码验证:'='},链接:功能(范围,元素,属性,ctrl){范围.$watch(function() {var 组合;if (scope.passwordVerify || ctrl.$viewValue) {组合 = scope.passwordVerify + '_' + ctrl.$viewValue;}回报合并;}, 函数(值){如果(值){ctrl.$parsers.unshift(function(viewValue) {var origin = scope.passwordVerify;如果(原点!== 视图值){ctrl.$setValidity("passwordVerify", false);返回未定义;} 别的 {ctrl.$setValidity("passwordVerify", true);返回视图值;}});}});}};});
I'm writing a password verify directive :
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">
Given 2 password fields in a form, if both password values are equal then the field affected by the directive is valid. The issue is that it works one way (i.e. when I type a password in the password-verify field). However, when the original password field is updated, the password-verify doesn't become valid.
Any idea how I could have a "two way binding verify?"
This should solve it:
View:
<div ng-controller='Ctrl'>
<form name='form'>
<input data-ng-model='user.password' type="password" name='password' placeholder='password' required>
<div ng-show="form.password.$error.required">
Field required</div>
<input ng-model='user.password_verify' type="password" name='confirm_password' placeholder='confirm password' required data-password-verify="user.password">
<div ng-show="form.confirm_password.$error.required">
Field required!</div>
<div ng-show="form.confirm_password.$error.passwordVerify">
Fields are not equal!</div>
</form
</div>
Directive
var app = angular.module('myApp', []);
app.directive("passwordVerify", function() {
return {
require: "ngModel",
scope: {
passwordVerify: '='
},
link: function(scope, element, attrs, ctrl) {
scope.$watch(function() {
var combined;
if (scope.passwordVerify || ctrl.$viewValue) {
combined = scope.passwordVerify + '_' + ctrl.$viewValue;
}
return combined;
}, function(value) {
if (value) {
ctrl.$parsers.unshift(function(viewValue) {
var origin = scope.passwordVerify;
if (origin !== viewValue) {
ctrl.$setValidity("passwordVerify", false);
return undefined;
} else {
ctrl.$setValidity("passwordVerify", true);
return viewValue;
}
});
}
});
}
};
});
这篇关于angularjs 中的密码检查指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!