AngularJs功能（八）--表单验证

摘要：表单验证表单验证是一项重要的功能，能保证我们的应用不会被恶意或错误的输入破坏。给加上意味着表单的名称是。验证提示这是在版本之后对表单验证的优化。

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

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

插入一段项目中注册的表单实例

//HTML


    用户注册


    

        
        
    
    

        

            手机号或邮箱不能为空
        
        

            手机号或邮箱格式错误
        
        

            手机号或邮箱长度不超过20位
        
    


    

        

            
            获取动态验证码
            
        
    
    

        

            验证码不能为空
        
        

            验证码长度不超过20位
        
    
    

        
        

            {{errorMessage}}
            登录
        
    


    
    
    我明白并同意
    《橙色云设计服务条款》
    
    
        注册
    



 //注册 JS
 var registUrl = "/cds/w/user/register.do";
 $scope.saveInfor = function(form) {
     form.$submitted = true;
     if (!form.$valid) return;
     var param = {
         loginId: $scope.model.loginId,
         password: $scope.model.password
     };
     $resource(registUrl + "?" + $scope._urlParamEncode(param), null, {
         "registerUser": {
             method: "POST"
         }
     }).registerUser(param).$promise.then(function(result) {
         if (result.status === "success") {
             $window.location.href = "/cds/portal/index.html";
         } else {
             $scope.registerResultStatus = true;
             if (result.message && result.message.indexOf("已注册") > 0) {
                 var htmlMsg = "您的邮箱|手机号已注册，请直接";
                 //登录
                 $scope.showLoginLinkFlag = true;
                 $scope.errorMessage = $sce.trustAsHtml(htmlMsg);
             } else {
                 $scope.errorMessage = result.message;
             }

         }
     });
 };


//登录按钮是否禁用（同意条框）
 $scope.agreeOrCanel = function() {
     var checkedState = $("#agree").attr("checked"); //记录当前选中状态
     if (checkedState == "checked") {
         $("#registerCustom").removeAttr("disabled");
     } else {
         $scope.agreeDisable = false;
         $("#registerCustom").attr("disabled", true);
     }
 }
 

代码放上来了。可以下大致看一下，发现和之前使用的有何不同之处。

下面我们列举表单中input元素上用到的验证选项，比如：
1.必填项，设置某个表单输入是否已经填写，只需要在输入字段元素上添加require标记即可。

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

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

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

在实例中，我们用到的是收拾好和邮箱都可验证登录，所以在匹配上的正则做文章。如下

5.同样我们也可以根据自定义的属性指令来定义一些校验规则，这里不做详细介绍。上一段代码吧。

app.directive("checkUsername", function($http) {
 return {
    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) {
                //code
            }).error(function(data) {
                //code
            })
        });
    }
}

});

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

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

loginForm.loginId.$pristine

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

loginForm.loginId.$dirty

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

loginForm.loginId.$valid

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

loginForm.password.$invalid

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

loginForm.password.$error

6.表单的提交验证。

loginForm.$submitted

给form加上name="loginForm"意味着表单的名称是loginForm。如何使用loginForm,比如我们验证表单是否被修改过loginForm.$submitted;

loginForm是$scope中的一个属性

ng-class根据注册状态和提交状态获取不同样式。

这是在angular1.3版本之后对angular表单验证的优化。它不再需要一个详细的表达式状态创建元素显示或隐藏。看看项目中的代码。

    

        手机号或邮箱不能为空
    
    

        手机号或邮箱格式错误
    
    

        手机号或邮箱长度不超过20位
    

可以看出，angular通过$error来监视模型的变化，因为$error中包含了错误的详细信息，
用ng-message=""绑定验证类型。会根据$error错误类型提示错误信息。
同时，如果我们的应用场景中如果同时，有好几处错误，那么，上面代码按照ng-message的顺序只会显示一条错误信息，如果我们需要全部显示出来只需要添加 ng-messages-multiple。

这里只做范例介绍，小伙伴们在项目中合理运用就好。