angularJS中的表单验证（包括自定义验证）

表单验证是angularJS一项重要的功能，能保证我们的web应用不会被恶意或错误的输入破坏。Angular表单验证提供了很多表单验证指令，并且能将html5表单验证功能同他自己的验证指令结合起来使用，进而在客户端验证时提供表单状态的实时反馈。

要使用表单验证，首先保证表单有一个name属性，一般的输入字段如最大，最小长度等，这些功能由html5表单属性提供，如果我们想屏蔽浏览器对表单的默认验证行为，可以在表单元素上添加novalidate标记。

表单基本格式如下：

<form name="form" novalidate>
        <label for="email">你的邮箱：</label>
        <input type="email" name="email" id="email" ng-model="user.email" placeholder="邮箱地址">
</form>

当然在input元素上还可以使用很多验证选项，比如：
1.必填项，设置某个表单输入是否已经填写，只需要在输入字段元素上添加require标记即可。

<input type="text" required>

2.最小（大）长度，验证表单输入的文本长度是否大于某个最小值，可以使用ng-minlength指令（ng-maxlength指令）

<input type="text" ng-minlength="5" ng-maxlength>

3.模式匹配，使用ng-pattern来确保输入匹配指定的正则表达式

<input type="text"  ng-pattern="/^[a-zA-Z]$/">

4. 电子邮件，只需要把input的类型设置为email即可

<input type="email" name="email" ng-model="user.email" >

5.数字，只需要将input的类型设置为number

<input type="number" name="age" ng-model="user.age">

6.URL，将input的类型设置为url

 

<input type="url" name="homepage" ng-modle="user.url">

7.自定义验证，在实际项目中我们通常会遇到比较复杂的验证，这时我们可以采用自定义验证。自定义验证使用的是自定义指令的方式，处理表单输入的内容，将结果转化为布尔值从而进行验证。比如我们需要向后台请求数据来判断用户名是否有效：

Html：

 

<input type="text" placeholder="username" name="usrename" ng-model="user.username" check-username="username">

自定义指令部分：（只是一个简单的势力）

app.directive('checkUsername', function($http){

                            return {

                                     require: 'ngModel',

                                     link: function(scope, ele, attrs, c){

                                               scope.$watch(attrs.ngModel, function(n){

                                                        if(!n) return;

                                                        $http({

                                                                 method: 'POST',

                                                                 url: '/api/check/' + attrs.username,

                                                                 data:{

                                                                           field: attrs.username,

                                                                           value: scope.ngModel

                                                                 }

                                                        }).success(function(data){

                                                                 c.$setValidity('unique', data.isUnique);

                                                        }).error(function(data){

                                                                 c.$setValidity('unique', false);

                                                        })

                                               });

                                     }

                            }

                   });

通过指令返回unique的布尔值来决定显示的警告信息。

由于表单的属性可以在其$scope对象中访问到，而我们又可以直接访问到$scope，因此js可以间接的访问DOM的表单属性，借助这些属性，我们可以对表单做出实时响应。

这些属性有：

1. 未修改的表单，用来判断用户是否修改了表单，如果修改了则为true，未修改则为false。

formName.inputFieldName.$pristine

2. 修改过的表单，只要用户修改过表单，无论输入是否通过验证，该值都将返回true

1. formName.inputFieldName.$dirty

3. 合法的表单，这个属性是用来判断表单的内容是否合法的，如果合法则该属性的值为true

formName.inputFieldName.$valid

4. 不合法的表单，这个属性与上个属性正好相反，如果不合法，则该属性值为true

formName.inputFieldName.$invalid

5. 错误，$error对象包含了当前表单的所有验证内容，以及它们是否合法的信息，如果验证失败，该属性值为true，如果验证成功，则该值为false

formName.inputFieldName.$error

表单验证的基础部分暂时就这些，剩下的明天补上。