Javascript angularjs 中的密码检查指令
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14012239/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
password-check directive in angularjs
提问by mpm
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 :
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.
给定表单中的 2 个密码字段，如果两个密码值相等，则受指令影响的字段是有效的。问题是它以一种方式工作（即当我在密码验证字段中输入密码时）。但是，当原始密码字段被更新时，密码验证不会生效。
Any idea how I could have a "two way binding verify?"
知道如何进行“双向绑定验证”吗？
采纳答案by asgoth
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;
}
});
}
});
}
};
});
回答by Jan Laussmann
I use the following directive because I want to re-validate both input field regardless of whether value 1 or value 2 was changed:
我使用以下指令是因为我想重新验证两个输入字段，无论值 1 还是值 2 已更改：
directive:
指示：
'use strict';
angular.module('myApp').directive('equals', function() {
return {
restrict: 'A', // only activate on element attribute
require: '?ngModel', // get a hold of NgModelController
link: function(scope, elem, attrs, ngModel) {
if(!ngModel) return; // do nothing if no ng-model
// watch own value and re-validate on change
scope.$watch(attrs.ngModel, function() {
validate();
});
// observe the other value and re-validate on change
attrs.$observe('equals', function (val) {
validate();
});
var validate = function() {
// values
var val1 = ngModel.$viewValue;
var val2 = attrs.equals;
// set validity
ngModel.$setValidity('equals', ! val1 || ! val2 || val1 === val2);
};
}
}
});
usage
用法
<input type="password" ng-model="value1" equals="{{value2}}" required>
<input type="password" ng-model="value2" equals="{{value1}}" required>
回答by bicycle
Creating a separate directive for this is not needed. There is already a build in Angular UI password validation tool. With this you could do:
不需要为此创建单独的指令。已经有一个内置的 Angular UI 密码验证工具。有了这个，你可以这样做：
<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}}
回答by Fredric
Yet another take on this is to match the model of one input to another input's value.
对此的另一种看法是将一个输入的模型与另一个输入的值相匹配。
app.directive('nxEqual', function() {
return {
require: 'ngModel',
link: function (scope, elem, attrs, model) {
if (!attrs.nxEqual) {
console.error('nxEqual expects a model as an argument!');
return;
}
scope.$watch(attrs.nxEqual, function (value) {
model.$setValidity('nxEqual', value === model.$viewValue);
});
model.$parsers.push(function (value) {
var isValid = value === scope.$eval(attrs.nxEqual);
model.$setValidity('nxEqual', isValid);
return isValid ? value : undefined;
});
}
};
});
So, if the password box's model is login.passwordthen you set the following attribute on the verification box: nx-equal="login.password", and test for formName.elemName.$error.nxEqual. Like so:
因此，如果密码框的模型是，login.password那么您在验证框上设置以下属性：nx-equal="login.password"，并测试formName.elemName.$error.nxEqual. 像这样：
<form name="form">
<input type="password" ng-model="login.password">
<input type="password" ng-model="login.verify" nx-equal="login.password" name="verify">
<span ng-show="form.verify.$error.nxEqual">Must be equal!</span>
</form>
Extended version:
扩大的视野：
For a new project of mine I had to modify the above directive so that it would only display the nxEqualerror when, and only when, the verification input had a value. Otherwise the nxEqualerror should be muted. Here's the extended version:
对于我的一个新项目，我不得不修改上述指令，以便它仅nxEqual在验证输入具有值时才显示错误。否则nxEqual应该消除错误。这是扩展版本：
app.directive('nxEqualEx', function() {
return {
require: 'ngModel',
link: function (scope, elem, attrs, model) {
if (!attrs.nxEqualEx) {
console.error('nxEqualEx expects a model as an argument!');
return;
}
scope.$watch(attrs.nxEqualEx, function (value) {
// Only compare values if the second ctrl has a value.
if (model.$viewValue !== undefined && model.$viewValue !== '') {
model.$setValidity('nxEqualEx', value === model.$viewValue);
}
});
model.$parsers.push(function (value) {
// Mute the nxEqual error if the second ctrl is empty.
if (value === undefined || value === '') {
model.$setValidity('nxEqualEx', true);
return value;
}
var isValid = value === scope.$eval(attrs.nxEqualEx);
model.$setValidity('nxEqualEx', isValid);
return isValid ? value : undefined;
});
}
};
});
And you would use it like so:
你会像这样使用它：
<form name="form">
<input type="password" ng-model="login.password">
<input type="password" ng-model="login.verify" nx-equal-ex="login.password" name="verify">
<span ng-show="form.verify.$error.nxEqualEx">Must be equal!</span>
</form>
Try it: http://jsfiddle.net/gUSZS/
回答by Foyzul Karim
I have done it without directive.
我是在没有指令的情况下完成的。
<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>
回答by Intellix
As of angular 1.3.0-beta12, invalid inputs don't write to ngModel, so you can't watch AND THEN validate as you can see here: http://plnkr.co/edit/W6AFHF308nyKVMQ9vomw?p=preview. A new validators pipeline was introduced and you can attach to this to achieve the same thing.
从 angular 1.3.0-beta12 开始，无效输入不会写入 ngModel，因此您无法观看然后验证，如您在此处看到的：http://plnkr.co/edit/W6AFHF308nyKVMQ9vomw?p=preview 。引入了一个新的验证器管道，您可以附加到它以实现相同的目的。
Actually, on that note I've created a bower component for common extra validators: https://github.com/intellix/angular-validatorswhich includes this.
实际上，在那篇笔记中，我为常见的额外验证器创建了一个 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;
};
}
};
});
回答by Mauro
https://github.com/wongatech/angular-confirm-fieldis a good project for this.
https://github.com/wongatech/angular-confirm-field是一个很好的项目。
Example here http://wongatech.github.io/angular-confirm-field/
这里的例子http://wongatech.github.io/angular-confirm-field/
The code below shows 2 input fields with the implemented functionality
下面的代码显示了具有已实现功能的 2 个输入字段
<input ng-confirm-field ng-model="emailconfirm" confirm-against="email" name="my-email-confirm"/>
<input ng-model="email" name="my-email" />
回答by dmackerman
I've used this directive with success before:
我以前成功地使用过这个指令：
.directive('sameAs', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
if (viewValue === scope[attrs.sameAs]) {
ctrl.$setValidity('sameAs', true);
return viewValue;
} else {
ctrl.$setValidity('sameAs', false);
return undefined;
}
});
}
};
});
Usage
用法
<input ... name="password" />
<input type="password" placeholder="Confirm Password"
name="password2" ng-model="password2" ng-minlength="9" same-as='password' required>
回答by bicycle
I was dealing with the same issue and found a good blog postabout it written by Piotr Buda. It's a good read and it explains the process very well. The code is as follows:
我正在处理同样的问题，并找到了Piotr Buda 写的一篇关于它的好博客文章。这是一本很好的读物，它很好地解释了这个过程。代码如下：
directives.directive("repeatPassword", function() {
return {
require: "ngModel",
link: function(scope, elem, attrs, ctrl) {
var otherInput = elem.inheritedData("$formController")[attrs.repeatPassword];
ctrl.$parsers.push(function(value) {
if(value === otherInput.$viewValue) {
ctrl.$setValidity("repeat", true);
return value;
}
ctrl.$setValidity("repeat", false);
});
otherInput.$parsers.push(function(value) {
ctrl.$setValidity("repeat", value === ctrl.$viewValue);
return value;
});
}
};
});
So you could do something like:
所以你可以这样做：
<input type="password" name="repeatPassword" id="repeatPassword" placeholder="repeat password" ng-model="user.repeatPassword" repeat-password="password" required>
Credit goes to the author
归功于作者
回答by Jasper
Is this not good enough:
这还不够好：
<input type="password" ng-model="passwd1" />
<input type="password" ng-model="passwd2" />
<label ng-show="passwd1 != passwd2">Passwords do not match...</label>
<button ng-disabled="passwd1 != passwd2">Save</button>
Simple, and works just fine for me.
简单，对我来说效果很好。
