密碼驗證與密碼欄和regExp特殊角色使用指令

此應用程序正在爲我工作，但如果有人發現任何錯誤/錯誤，那麼請糾正它。密碼驗證與密碼欄和regExp特殊角色使用指令

我創建了一個使用angular js指令進行密碼驗證的小應用程序。用戶可以驗證所需密碼的地方一個特殊的&大寫字母和一個最小長度爲8的數字值。我還創建了密碼強度條。

感謝

這裏是我的HTML文件：

<!DOCTYPE html> 
<html> 
<head> 
    <link data-require="[email protected]*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
    <script data-require="[email protected]*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
    <script data-require="[email protected]*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
    <script data-require="[email protected]*" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.4.0-beta.3/angular.js"></script> 
    <script src="passwordModule.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
</head> 
<body> 
    <div ng-app="passwordModule" ng-controller="pwdCtrl" class="container"> 
    <h2>Password Validation:</h2> 
    <form name="form"> 
     <div class="form-group"> 
      <label>Password</label> 
      <input type="text" name="password" id="password" ng-model="user.password" ng-model-options="{allowInvalid: true}" 
      pattern-validator="((?=.*\d)(?=.*[A-Z])(?=.*\W).{8,8})" class="form-control"/> 
     </div> 
     <span class="alert alert-error" ng-show="form.password.$error.passwordPattern"> 
     Password required 1 special & capital letter, 1 numeric letter <br> &nbsp; &nbsp; Required minimum 8 letter.</span> 

     <div class="form-group"> 
     <label>Password Strength</label> 
     <password-strength ng-model="user.password"></password-strength> 

     <label>Confirm Password</label> 
     <input class="form-control" type = "text" name = "Confpassword" ng-model="user.cnfPwd" data-equal-to="password" > 
     <div data-ng-show = "showmsg"> Password matched </div> 
     <div data-ng-show = "hidemsg"> Password not matched </div> 
    </div> 
    <button class="btn btn-primary" type="button" ng-disabled = "disabledButton"> save </button> 
</form> 
</div> 
<script type="text/javascript"> 
</script> 
</body> 
</html>

這裏是我的控制器的文件：

var pwdModule = angular.module('passwordModule', []); 
//Controller 
pwdModule.controller('pwdCtrl', ['$scope', 
function($scope) { 
    // Initialise the password as hello 
    $scope.user = {}; 
    $scope.showmsg = false; 
    $scope.disabledButton = true; 


    if($scope.user.password === undefined) { 
    $scope.showmsg = false; 
    } 

    $scope.$watch('user.cnfPwd', function(newVal, oldVal) { 
    if(newVal !== undefined){ 
     $scope.hidemsg = true; 
    } 

    if(newVal === $scope.user.password && $scope.user.password !== undefined) { 
     $scope.showmsg = true; 
     $scope.disabledButton = false; 
     $scope.hidemsg = false; 
    } else { 
     $scope.showmsg = false; 
     $scope.disabledButton = true; 
    } 
    }) 
} 
]); 

// Directive: Validate a regex pattern 
pwdModule.directive('patternValidator', [ 
function() { 
    return { 
    require: 'ngModel', 
    restrict: 'A', 
    link: function(scope, elem, attrs, ctrl) { 
     ctrl.$parsers.unshift(function(viewValue) { 

     var patt = new RegExp(attrs.patternValidator); 

     var isValid = patt.test(viewValue); 

     ctrl.$setValidity('passwordPattern', isValid); 

     return viewValue; 
     }); 
    } 
    }; 
    } 
]); 

// Dircetive: Display strength bar 
pwdModule.directive('passwordStrength', [ 
function() { 
    return { 
    require: 'ngModel', 
    restrict: 'E', 
    scope: { 
     password: '=ngModel' 
    }, 

    link: function(scope, elem, attrs, ctrl) { 

     scope.$watch('password', function(newVal) { 

     var strength = isSatisfied(newVal && newVal.length >= 8) + 
         isSatisfied(newVal && /[A-z]/.test(newVal)) + 
         isSatisfied(newVal && /(?=.*\W)/.test(newVal)) + 
         isSatisfied(newVal && /\d/.test(newVal)); 

     var style = '', 
      percent= 0; 

     switch (strength) { 
      case 1: 
       style = 'danger'; 
       percent = 25; 
      break; 
      case 2: 
      style = 'warning'; 
      percent = 50; 
      break; 
      case 3: 
      style = 'warning'; 
      percent = 75; 
      break; 
      case 4: 
      style = 'success'; 
      percent = 100; 
      break; 
     } 

     scope.style = style; 
     scope.percent = percent; 

     function isSatisfied(criteria) { 
      return criteria ? 1 : 0; 
     } 
     }, true); 
    }, 
    template: '<div class="progress">' + 
     '<div class="progress-bar progress-bar-{{style}}" style="width: {{percent}}%"></div>' + 
     '</div>' 
    } 
} 
])

請檢查這一點，如果任何修改需要然後和它。感謝

來源

2015-08-28 Abhishek

請確保你沒有'[AZ]''不過[A-ZA -z]'，我想你需要'^（？=。* \ W）'而不是'（？=。* \ W）'。如果* pattern-validator *表達式默認是錨定的，那麼它就可以，但是我仍然使用'（？=。* \ d）（？=。* [AZ]）（？=。* \ W）。{ 8}'。 –

#stribizhev謝謝。 – Abhishek

我發表了我的觀察與一些參考和解釋。 –

談到錯誤：

isSatisfied（的newval & & /[Az]/.test(newVal））+

這裏，[A-z]比賽比英文字母多，它也匹配[,\, ],^,_和`，參見this SO post。

在

isSatisfied（的newval & & /(?=.*\W)/.test(newVal））+

你應該錨先行，以提高性能：

isSatisfied(newVal && /^(?=.*\W)/.test(newVal)) + 
        ^

注意{8,8}相當於{8} - 正好是8次出現前述subpatt的ERN。使用

pattern-validator="(?=.*\d)(?=.*[A-Z])(?=.*\W).{8}"

或者（如果它不是由默認的停靠，不能在任何地方找到它）：

pattern-validator="^(?=.*\d)(?=.*[A-Z])(?=.*\W).{8}$"

來源

2015-08-28 10:24:57

密碼驗證與密碼欄和regExp特殊角色使用指令

回答

相關問題