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个字段。为什么不简单地检查自定义验证器中的每个条件，如the documentation？

中所述

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

AngularJS密码强度验证

1 个答案: