AngularJS实现表单验证

虽然我不是前端程序员，但明白前端做好验证是多么重要。

因为这样后端就可以多喘口气了，而且相比后端什么的果然还是前端可以提高用户的幸福感。

AngularJS提供了很方便的表单验证功能，在此记录一番。

首先从下面这段代码开始

代码如下:
<form ng-app="myApp" ng-controller="validationController" name="mainForm" novalidate>
    <p>Email:
        <input type="email" name="email" ng-model="email" required>
        <span style="color:red" ng-show="mainForm.email.$dirty && mainForm.email.$invalid">
            <span ng-show="mainForm.email.$error.required">Email is required.</span>
            <span ng-show="mainForm.email.$error.email">Invalid email address.</span>
        </span>
    </p>
    <p>
        <input type="submit" ng-disabled="mainForm.$invalid">
    </p>
</form>
<script>
angular.module('myApp',[])
.controller('validationController', ['$scope',function($scope) {
    $scope.user = 'Kavlez';
    $scope.email = 'sweet_dreams@aliyun.com';
}]);
</script>

input标签的一些验证选项，通常和HTML5标记搭配使用。

必填

<input type="text" required />
长度

使用指令ng-minlength/ng-maxlength

<input type="text" ng-minlength="5" />
特定格式
例如电子邮件、URL、数字，将type设置为相应类型即可，例如：

代码如下:
<input type="email" name="email" ng-model="user.email" />
<input type="number" name="age" ng-model="user.age" />
<input type="url" name="homepage" ng-model="user.facebook_url" />

模式匹配

使用指令ng-pattern，例如：

代码如下:
<input type="text" ng-pattern="[a-z]" />

表单属性，通过这些属性可以更容易地对表单进行操作

pristine/dirty
表示是否已修改，例如

代码如下:
<form name="mainForm" ng-controller="orderController">
<input type="email" name="userEmail" ng-model="myEmail" />
    {{mainForm.userEmail.$pristine}}
    {{mainForm.userEmail.$dirty}}
</form>

以formName.fieldName.$pristine方式访问，input必须有ng-model声明。

代码如下:
valid/invalid

表示是否通过验证。

代码如下:
$error

表单验证信息，验证不通过时返回相应信息。