Question

我正在试图弄清楚如何在Angular中使用自定义指令。由于大量的谷歌搜索和教程，我已经产生了以下内容。它应该检查

我的“密码”字段输入足够强大，即包含一个字母，一个数字，长度至少为8个字符。
“密码”字段与“确认密码”字段匹配。

它完美适用于匹配，即第2部分。但是，它似乎没有做任何检查强度，我没有得到任何控制台错误。谁能告诉我哪里出错了或建议更好的方法呢？

angular.module('myApp')
  .directive('match',['$parse', function ($parse) {
        return {
            require: 'ngModel',
            restrict: 'A',
            link: function(scope, elem, attrs, ctrl) {

//This part does the matching

                scope.$watch(function() {
                    return (ctrl.$pristine && angular.isUndefined(ctrl.$modelValue)) || $parse(attrs.match)(scope) === ctrl.$modelValue;
                }, function(currentValue) {
                    ctrl.$setValidity('match', currentValue);
                });
            },

//This part is supposed to check the strength

            ctrl.$parsers.unshift(function(viewValue) {

                scope.pwdValidLength = (viewValue && viewValue.length >= 8 ? 'valid' : undefined);
                scope.pwdHasLetter = (viewValue && /[A-z]/.test(viewValue)) ? 'valid' : undefined;
                scope.pwdHasNumber = (viewValue && /\d/.test(viewValue)) ? 'valid' : undefined;

              if(scope.pwdValidLength && scope.pwdHasLetter && scope.pwdHasNumber) {
                    ctrl.$setValidity('pwd', true);
                    return viewValue;
                } else {
                    ctrl.$setValidity('pwd', false);                    
                    return undefined;
                }


                });


        };
    }]);

这是我的HTML：

<form name = "myForm">

<div class="control-group">
  <label class="control-label" for="inputPassword">Password</label>
  <div class="controls">
    <input ng-model="user.password" class="immediate-help" data-ng-class="{'ng-invalid':myForm.confirmPassword.$error.match}" password-validate required type="password" id="password" placeholder="Password">
    <div class="input-help">
      <h5>Password must meet the following requirements:</h5>
      <ul>
        <li ng-class="pwdHasLetter">At least <strong>one letter</strong></li>
        <li ng-class="pwdHasNumber">At least <strong>one number</strong></li>
        <li ng-class="pwdValidLength">At least <strong>8 characters long</strong></li>
      </ul>
    </div>
  </div>
 </div> 


                        <br />

                        <input ng-model="user.passwordConfirm" type="password" data-match="user.password" name="confirmPassword" class="form-control" placeholder = "Confirm Password"/> 

                        <br />
                        <div ng-show="myForm.confirmPassword.$error.match">Passwords do not match!</div>
                        <br />
                        <br />
                        <a href = "#/home" ng-click="createUser()"  class="btn btn-small btn-primary">Register</a>

</form>

Answer 1

上面的代码有错误（ctrl.$parsers.unshift(...)部分在之外的函数;我想这些都是拼写错误。）

无论如何，将解析器函数更改为总是返回viewValue，加上一些可能对此不重要的微小更改（例如，检查不在范围内，而是在本地变量，它们的值是布尔值，而不是"valid" / undefined），诀窍是：

app.directive('match',['$parse', function ($parse) {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function(scope, elem, attrs, ctrl) {
//This part does the matching
            scope.$watch(function() {
                return (ctrl.$pristine && angular.isUndefined(ctrl.$modelValue)) || $parse(attrs.match)(scope) === ctrl.$modelValue;
            }, function(currentValue) {
                ctrl.$setValidity('match', currentValue);
            });

//This part is supposed to check the strength
            ctrl.$parsers.unshift(function(viewValue) {
                var pwdValidLength, pwdHasLetter, pwdHasNumber;

                pwdValidLength = (viewValue && viewValue.length >= 8 ? true : false);
                pwdHasLetter = (viewValue && /[A-z]/.test(viewValue)) ? true : false;
                pwdHasNumber = (viewValue && /\d/.test(viewValue)) ? true : false;

                if( pwdValidLength && pwdHasLetter && pwdHasNumber ) {
                    ctrl.$setValidity('pwd', true);
                } else {
                    ctrl.$setValidity('pwd', false);                    
                }
                return viewValue;
            });
        },
    };
}]);

请参阅小提琴：http://jsfiddle.net/EHJq8/

检查密码强度并确认匹配的指令

1 个答案: