如何验证输入参数格式？

I would like some specific help and advice on using ng-pattern.

我想要一些关于使用ng-pattern的具体帮助和建议。

I have the following rules:

我有以下规则：

Passwords must have at least one non letter or digit character.
密码必须至少包含一个非字母或数字字符。
Passwords must have at least one digit ('0'-'9').
密码必须至少有一位数（'0' - '9'）。
Passwords must have at least one uppercase ('A'-'Z').
密码必须至少有一个大写字母（'A' - 'Z'）。

On my front-end I have this in the HTML:

在我的前端，我在HTML中有这个：

<span ng-show="regForm.password.$dirty &&
               !regForm.password.$error.required &&
               !regForm.password.$error.minlength &&
               (aus.password != aus.confirmPassword)">
  Passwords do not match
</span>

Is there a way that I can create other ng-shows that would test if the input met the other three rules with ng-pattern?

有没有办法可以创建其他ng-shows，测试输入是否符合其他三个规则与ng-pattern？

Here's my <input>

这是我的

<input id="password"
       name="password"
       ng-model="aus.password"
       ng-minlength="6"
       ng-required="true"
       type="password"
       value="" />

Hope someone can help me with an answer to this that uses ng-pattern. Please note that this is not a duplicate question to using an HTML regex. I am looking for specific ng-pattern help.

希望有人可以帮我解决使用ng-pattern的问题。请注意，这不是使用HTML正则表达式的重复问题。我正在寻找特定的ng-pattern帮助。

1 个解决方案

#1

Building a regular expression for ng-pattern that expects a digit and an uppercase letter and a special character can get hard to manage, though there are some SO answers around that will set you in that direction. As @Petr Averyanov suggested, custom validators are a better way to go. They're more flexible, easier to maintain, and let you separate your various error cases into different messages to the user.

为ng-pattern构建一个期望数字和大写字母以及特殊字符的正则表达式可能很难管理，尽管有一些SO答案会让你朝这个方向前进。正如@Petr Averyanov建议的那样，自定义验证器是一种更好的方法。它们更灵活，更易于维护，并允许您将各种错误情况分离为不同的消息给用户。

Read up on them in the Custom Validation section of Angular's Forms documentation. Pop open this snippet for a demo:

在Angular的Forms文档的Custom Validation部分中阅读它们。 Pop打开此片段进行演示：

var app = angular.module('validationDemo', ['ngMessages']);

app.directive('strongPassword', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$validators.containsSpecial = function(modelValue, viewValue) {
        if (ctrl.$isEmpty(modelValue)) { return true; }
        if (/[^a-z0-9]/i.test(viewValue)) { return true; }
        return false;
      };
      
      ctrl.$validators.containsDigit = function(modelValue, viewValue) {
        if (ctrl.$isEmpty(modelValue)) { return true; }
        if (/\d/.test(viewValue)) { return true; }
        return false;
      };
      
      ctrl.$validators.containsUppercase = function(modelValue, viewValue) {
        if (ctrl.$isEmpty(modelValue)) { return true; }
        if (/[A-Z]/.test(viewValue)) { return true; }
        return false;
      };
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script>

<body ng-app="validationDemo">
  <form name="form" class="css-form" novalidate>
    <div>
      Password:
      <input type="text" ng-model="password" name="password" strong-password /><br />
      {{password}}
      <ul ng-messages="form.password.$error" multiple="true">
        <li ng-message="containsSpecial">
          Your password must contain at least one non-letter, non-digit character
        </li>
        <li ng-message="containsDigit">
          Your password must contain at least one digit
        </li>
        <li ng-message="containsUppercase">
          Your password must contain at least one uppercase letter
        </li>
      </ul>
    </div>
  </form>
</body>

You start by declaring a directive for your validators. We'll call this one strongPassword.

首先，为验证器声明一个指令。我们称之为强势密码。

var app = angular.module('validationDemo', []);

app.directive('strongPassword', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      // Validators go here
    }
  };
});

Attach the directive to your password input as an HTML attribute, with the usual camelCase to dash-separated conversion.

将指令作为HTML属性附加到您的密码输入，通常使用camelCase进行破折号转换。

<body ng-app="validationDemo">
  <form name="form" class="css-form" novalidate>
    <div>
      Password:
      <input type="text" ng-model="password" name="password" strong-password /><br />
      {{password}}
    </div>
  </form>
</body>

For each validation you want to add, set a key in your directive on ctrl.$validators. So to validate that the password contains a digit,

对于要添加的每个验证，请在ctrl。$ validators中的指令中设置一个键。因此要验证密码是否包含数字，

link: function(scope, elm, attrs, ctrl) {
  ctrl.$validators.containsDigit = function(modelValue, viewValue) {
    if (ctrl.$isEmpty(modelValue)) { return true; } // They haven't typed yet
    if (/\d/.test(viewValue)) { return true; } // Found a digit
    return false;
  };
}

Then you get access to errors on form.<element name>.$error, in this case form.password.$error.containsDigit. Use the ng-messages directive (make sure to import angular-messages.js) to display the errors to your user.

然后你可以访问表单上的错误。。$ error，在这种情况下是form.password。$ error.containsDigit。使用ng-messages指令（确保导入angular-messages.js）以向用户显示错误。

<ul ng-messages="form.password.$error" multiple="true">
  <li ng-message="containsDigit">
    Your password must contain at least one digit
  </li>
</ul>

The value to ng-messages is the error object on the form, and each ng-message describes a key on $error with a value you want to print. The multiple option tells Angular to display all messages at once; otherwise, you get just one at a time.

ng-messages的值是表单上的错误对象，每个ng-message都描述了一个带有您要打印的值的$ error键。 multiple选项告诉Angular一次显示所有消息;否则，你一次只能得到一个。

#1