angularjs中的密码检查指令

Question

我正在写一个密码验证指令：

 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">

给定一个格式的2个密码字段，如果两个密码值相等，则该指令影响的字段有效。问题是它以一种方式起作用（即，当我在密码验证字段中键入密码时）。但是，当原始密码字段更新时，密码验证无效。

知道如何进行“双向绑定验证”吗？

angularjs中的密码检查指令

Answer 1

这应该解决它：视图：<div ng-controller='Ctrl'>&nbsp; &nbsp;<form name='form'>&nbsp; &nbsp; &nbsp; <input data-ng-model='user.password' type="password" name='password' placeholder='password' required>&nbsp; &nbsp; &nbsp; <div ng-show="form.password.$error.required">&nbsp; &nbsp; &nbsp; &nbsp; Field required</div>&nbsp; &nbsp; &nbsp; <input ng-model='user.password_verify' type="password" name='confirm_password' placeholder='confirm password' required data-password-verify="user.password">&nbsp; &nbsp; &nbsp; <div ng-show="form.confirm_password.$error.required">&nbsp; &nbsp; &nbsp; &nbsp; Field required!</div>&nbsp; &nbsp; &nbsp; <div ng-show="form.confirm_password.$error.passwordVerify">&nbsp; &nbsp; &nbsp; &nbsp; Fields are not equal!</div>&nbsp; &nbsp;</form</div>指示var app = angular.module('myApp', []);app.directive("passwordVerify", function() {&nbsp; &nbsp;return {&nbsp; &nbsp; &nbsp; require: "ngModel",&nbsp; &nbsp; &nbsp; scope: {&nbsp; &nbsp; &nbsp; &nbsp; passwordVerify: '='&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; link: function(scope, element, attrs, ctrl) {&nbsp; &nbsp; &nbsp; &nbsp; scope.$watch(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var combined;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (scope.passwordVerify || ctrl.$viewValue) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;combined = scope.passwordVerify + '_' + ctrl.$viewValue;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return combined;&nbsp; &nbsp; &nbsp; &nbsp; }, function(value) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (value) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctrl.$parsers.unshift(function(viewValue) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var origin = scope.passwordVerify;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (origin !== viewValue) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctrl.$setValidity("passwordVerify", false);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return undefined;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctrl.$setValidity("passwordVerify", true);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return viewValue;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp;};});

Answer 2

我使用以下指令，因为我想重新验证两个输入字段，而不管值1或值2是否更改：指示：'use strict';angular.module('myApp').directive('equals', function() {&nbsp; return {&nbsp; &nbsp; restrict: 'A', // only activate on element attribute&nbsp; &nbsp; require: '?ngModel', // get a hold of NgModelController&nbsp; &nbsp; link: function(scope, elem, attrs, ngModel) {&nbsp; &nbsp; &nbsp; if(!ngModel) return; // do nothing if no ng-model&nbsp; &nbsp; &nbsp; // watch own value and re-validate on change&nbsp; &nbsp; &nbsp; scope.$watch(attrs.ngModel, function() {&nbsp; &nbsp; &nbsp; &nbsp; validate();&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; // observe the other value and re-validate on change&nbsp; &nbsp; &nbsp; attrs.$observe('equals', function (val) {&nbsp; &nbsp; &nbsp; &nbsp; validate();&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; var validate = function() {&nbsp; &nbsp; &nbsp; &nbsp; // values&nbsp; &nbsp; &nbsp; &nbsp; var val1 = ngModel.$viewValue;&nbsp; &nbsp; &nbsp; &nbsp; var val2 = attrs.equals;&nbsp; &nbsp; &nbsp; &nbsp; // set validity&nbsp; &nbsp; &nbsp; &nbsp; ngModel.$setValidity('equals', ! val1 || ! val2 || val1 === val2);&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; }&nbsp; }});用法<input type="password" ng-model="value1" equals="{{value2}}" required><input type="password" ng-model="value2" equals="{{value1}}" required>

Answer 3

不需要为此创建单独的指令。Angular UI密码验证工具中已经存在一个内部版本。这样，您可以执行以下操作：<input name="password" required ng-model="password"><input name="confirm_password"&nbsp; &nbsp; &nbsp; &nbsp;ui-validate=" '$value==password' "&nbsp; &nbsp; &nbsp; &nbsp;ui-validate-watch=" 'password' ">&nbsp;Passwords match? {{!!form.confirm_password.$error.validator}}

Answer 4

对此的另一种做法是使一个输入的模型与另一个输入的值匹配。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;            });        }    };});因此，如果密码盒的型号为，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>扩大的视野：对于我的一个新项目，我必须修改上述指令，以使其仅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;            });        }    };});您将像这样使用它：<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>