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

对于实际的密码字段，我想创建一个目录，只有当三个隐藏字段也有效时，该目录才会将该字段设置为有效。
我的目录如下所示(我的表单名为注册，首先我仅根据长度隐藏字段测试它):

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

这是验证您的字段的一种非常复杂的方式。您不应该仅仅为了验证第 4 个隐藏字段而用 3 个隐藏字段污染您的 View 。为什么不简单地检查自定义验证器中的每个条件，如 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;
        }
      });
    }
  };
});