如何将自定义验证添加到AngularJS表单？

编辑：在下面添加了有关ngMessages（ > = 1.3.X）的信息。

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

由于如果您使用Google“ AngularFormValidation”，这是最好的结果之一，所以我想为从那里来的任何人添加另一个答案。

FormController。$ setValidity中有一个方法，但是它看起来不像公共API，所以我宁愿不使用它。

这是“公开”的，不用担心。用它。这就是它的目的。如果不打算使用它，Angular开发人员将把它私有化。

要进行自定义验证，如果您不想使用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它可能preferrable替换

ng-if

ng-show

这是强制性的链接

另外，我已经写了一些关于该主题的博客条目，其中涉及了更多细节：

角度形式验证

自定义验证指令

编辑：在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"

还有一个ngMessages示例的插件