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

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

指示

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;

                    }

                });

            }

        });

     }

   };

});

Answer 2

我使用以下指令，因为我想重新验证两个输入字段，而不管值1或值2是否更改：

指示：

'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);

      };

    }

  }

});

用法

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

       ui-validate=" '$value==password' "

       ui-validate-watch=" 'password' ">

 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>