AngularJS实现表单验证

AngularJS为表单状态提供了相应地css class

.ng-pristine
.ng-dirty
.ng-valid
.ng-invalid

例如，让验证通过为绿色，失败为红色:

input.ng-valid {
    color: green;
}
input.ng-invalid {
    color: green;
}

给出的例子中仅仅是一个email的验证就写了这么多，如果再加几个field，再加几种不同的提示，再加上几个事件，代码会变得杂乱不堪。

事实上并不推荐这样做，我们有更好的方法。
就是使用angular-messages.js

首先，不要忘了这两步

<script src="angular-messages.js"></script>
angular.module('myApp', ['ngMessages'])

好，先用ng-messages和ng-message替换掉那些重复的东西，上面的例子变成:

<form ng-controller="validationController" name="mainForm" >
    <p>Email:
        <input
        type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" required />
        <div style="color:red" ng-messages="mainForm.email.$error" ng-messages-multiple>
            <p class="error" ng-message="required">Email is required.</p>
            <p class="error" ng-message="email">Invalid email address.</p>
            <p class="error" ng-message="minlength">min length 10</p>
            <p class="error" ng-message="maxlength">max length 50</p>
        </div>
    </p>
    <p>
        <input type="submit" ng-disabled="mainForm.$invalid" />
    </p>
</form>

功能上没有任何变化，只是把重复的代码全部去掉了。
注意区分ng-messasges和ng-message，有没有感觉有点像with()? 后面的ng-messages-multiple，这里用作同时让多个提示出现。

但这样仍然不够好，就算省去了ng-message中的内容，但是多个field中都存在required验证时仍然会有重复。
而且，如果不同页面中的表单都涉及到相同的内容时重复的验证提示会越来越多。
为了解决这个问题，我们可以使用ng-messages-include指令。
该指令用来引用模板，比如上面的例子变为:

<form ng-controller="validationController" name="mainForm" >
    <p>Email:

 2/5   首页 上一页 1 2 3 4 5 下一页 尾页