angularjs - 如何向 AngularJS 表单添加自定义验证？

Question

我有一个带有输入字段和验证设置的表单，通过添加 required 属性等。但对于某些字段我需要做一些额外的验证。我如何“利用”FormController 控制的验证？

自定义验证可能类似于“如果填写了这 3 个字段，则该字段是必需的，并且需要以特定方式格式化”。

FormController.$setValidity 中有一个方法，但它看起来不像公共(public) API，所以我不想使用它。创建自定义指令并使用 NgModelController 看起来像是另一种选择，但基本上需要我为每个自定义验证规则创建一个指令，这是我不想要的。

实际上，将 Controller 中的字段标记为无效(同时保持 FormController 同步)可能是我在最简单的情况下完成工作所需的事情，但我不这样做知道如何做到这一点。

Answer 1

编辑:在下面添加了有关 ngMessages (>= 1.3.X) 的信息。

标准表单验证消息(1.0.X 及更高版本)

由于如果您在 Google 上搜索“Angular Form Validation”，这是最重要的结果之一，因此目前，我想为来自那里的任何人添加另一个答案。

There's a method in FormController.$setValidity but that doesn't look like a public API so I rather not use it.

这是“公开的”，不用担心。用它。这就是它的用途。如果它不打算被使用，Angular 开发人员就会在闭包中将其私有(private)化。

要进行自定义验证，如果您不想像其他答案建议的那样使用 Angular-UI，您可以简单地滚动自己的验证指令。

app.directive('blacklist', function (){ 
   return {
      require: 'ngModel',
      link: function(scope, elem, attr, ngModel) {
          var blacklist = attr.blacklist.split(',');

          //For DOM -> model validation
          ngModel.$parsers.unshift(function(value) {
             var valid = blacklist.indexOf(value) === -1;
             ngModel.$setValidity('blacklist', valid);
             return valid ? value : undefined;
          });

          //For model -> DOM validation
          ngModel.$formatters.unshift(function(value) {
             ngModel.$setValidity('blacklist', blacklist.indexOf(value) === -1);
             return value;
          });
      }
   };
});

这里有一些示例用法:

<form name="myForm" ng-submit="doSomething()">
   <input type="text" name="fruitName" ng-model="data.fruitName" blacklist="coconuts,bananas,pears" required/>
   <span ng-show="myForm.fruitName.$error.blacklist">
      The phrase "{{data.fruitName}}" is blacklisted</span>
   <span ng-show="myForm.fruitName.$error.required">required</span>
   <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>

注意:在 1.2.X 中，最好替换为 ng-if对于 ng-show上面

这是一个强制性的plunker link

另外，我还写了一些关于这个主题的博客文章，其中有一些更详细的内容:

Angular Form Validation

Custom Validation Directives

编辑:在 1.3.X 中使用 ngMessages

您现在可以使用 ngMessages 模块而不是 ngShow 来显示错误消息。它实际上适用于任何内容，不一定是错误消息，但这是基础知识:

1. 包括 <script src="angular-messages.js"></script>

2. 引用ngMessages在你的模块声明中:

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

3. 添加适当的标记:

   <form name="personForm">
     <input type="email" name="email" ng-model="person.email" required/>
   
     <div ng-messages="personForm.email.$error">
       <div ng-message="required">required</div>
       <div ng-message="email">invalid email</div>
     </div>
   </form>
   

在上面的标记中，ng-message="personForm.email.$error"基本上指定 ng-message 的上下文子指令。然后ng-message="required"和ng-message="email"指定要监视的上下文的属性。 最重要的是，他们还指定了 checkin 顺序。它在列表中找到的第一个“真实”的消息获胜，并且它将显示该消息，而不显示其他消息。

还有一个plunker for the ngMessages example