文章/答案/技术大牛

发布

社区首页 >问答首页 >密码条密码验证&使用指令的角度上的regExp特殊字符

问密码条密码验证&使用指令的角度上的regExp特殊字符
EN

Stack Overflow用户

提问于 2015-08-28 10:14:55

回答 1查看 1.4K关注 0票数 0

这个应用程序正在为我工作，但是如果有人发现任何错误/错误，请纠正它。

我创建了一个用于密码验证的小型应用程序，使用了角js指令。其中，用户可以验证密码，这是需要一个特殊和大写字符，和一个最小长度8的数字值。我还创建了密码强度栏。

谢谢

在这里Plunkr链路我的

以下是我的HTML文件：

<!DOCTYPE html>
<html>
<head>
   <link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
   <script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
   <script data-require="bootstrap@*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
   <script data-require="angular.js@*" 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>'
  }
}
])

请检查这个，如果需要任何修改，然后，并对它。谢谢

javascript

regex

angularjs

回答 1

Stack Overflow用户

发布于 2015-08-28 10:24:57

说到错误：

isSatisfied(newVal && /A/..test(NewVal))+

在这里，[A-z]匹配的不仅仅是英文字母，它还匹配[、\、]、^、_和`，参见这是如此的帖子。

在……里面

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

为了提高性能，您应该锚定前瞻：

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

注意，{8,8}等价于{8} --恰恰是前面的子模式出现了8次。使用

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

或者(如果默认情况下没有锚定，则在任何地方都找不到它)：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32268615

复制

相似问题

问密码条密码验证&使用指令的角度上的regExp特殊字符
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问密码条密码验证&使用指令的角度上的regExp特殊字符EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问密码条密码验证&使用指令的角度上的regExp特殊字符
EN