AngularJS密码强度验证

Question

我想知道你是否能够帮助我.我正在尝试验证密码字段的工作.密码必须符合某些有效的标准,并且一旦满足每个标准,它就会立即检查.

为此,我创建了3个隐藏字段,每个字段都复制密码字段中的值,并根据所需的3个条件之一对其进行验证.即,其中一个标准要求用户输入一个数字,一旦他们这样做,说明需要数字的文本变为绿色.其他两个隐藏字段也会发生同样的事情.这些隐藏的字段可以在下面看到:

         <!--7-25 characters -->
         <input  required ng-model="password"  ng-pattern="/.{7,25}/"  name="length" type="text"  />
        <!--Contain at least 1 letter -->
         <input  required ng-model="password"  ng-pattern="/[a-zA-Z]+/" name="letter" type="text"  />
        <!--Contain at least 1 number -->
         <input  required ng-model="password"  ng-pattern="/[0-9]+/"  name="number" type="text"  />

对于实际的密码字段,我想创建一个目录,如果三个隐藏字段也有效,则该目录只能将该字段设置为有效.
我的目录看起来像这样(我的表单命名为registration,并且以im开头仅对长度隐藏字段进行测试):

app.directive('validPwd', function() {
  return {
        restrict: 'A', 
        require: '?ngModel', 
        link: function(scope, elem, attrs, ngModel) {
          if(!ngModel) return; 


          scope.$watch(attrs.ngModel, function() {
            validate();
          });

          var validate = function() {


            // set validity
            ngModel.$setValidity('validPwd', registration.length.$valid);
          };
        }
      }
    });

我的问题是我的指令给了我一个错误,它无法读取未定义的属性长度.我没有正确地提到它或者是什么？我似乎无法弄明白.

任何帮助将不胜感激.

Answer 1

这是验证您的领域的一种非常复杂的方式.您不应该使用3个隐藏字段污染您的视图,以验证第4个字段.为什么不简单地检查自定义验证器中的每个条件,如文档中所述？

app.directive('validPwd', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {
        var containsLetter = containsLetter(viewValue);
        var containsDigit = containsDigit(viewValue);
        var hasCorrectLength = hasCorrectLength(viewValue);

        ctrl.$setValidity('containsLetter', containsLetter);
        ctrl.$setValidity('containsDigit', containsDigit);
        ctrl.$setValidity('hasCorrectLength', hasCorrectLength);

        if (containsLetter && containsDigit && hasCorrectLength) {
          return viewValue;
        } 
        else {
          return undefined;
        }
      });
    }
  };
});