指令，檢查密碼強度和確認匹配

Question

我想弄清楚如何在Angular中使用自定義指令。由於大量的谷歌搜索和教程，我產生了以下內容。它應該檢查

1. 我的「密碼」字段輸入足夠強大，即包含一個字母，一個數字，長度至少爲8個字符。
2. 「密碼」字段與「確認密碼」字段相匹配。

它適用於匹配，即第2部分。然而，它似乎沒有做任何檢查強度方面，我沒有得到任何控制檯錯誤。任何人都可以告訴我哪裏出錯或者建議更好的方法嗎？

我立足我的力量校驗碼在this fiddle

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/