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

zhaochunqi 发布于2019-08-22 14:00 / 534人阅读

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

表单验证

表单验证是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。

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

专线服务服务器托管验证表单表单验证表单验证代码表单验证实例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92736.html

AngularJS自定义表单验证

摘要：在自定义的指令中，我们可以添加我们的验证方法到的对象上。验证码在表单不合法时禁用提交按钮提交保存成功判断手机号是否重复验证两次输入的密码是否相同的自定义验证当值为空时，通过验证，因为有 Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox)，也实现了很多指令做为验证(required,...

gaomysion 2019-08-02 15:55 评论0 收藏0
AngularJS自定义表单验证

摘要：在自定义的指令中，我们可以添加我们的验证方法到的对象上。验证码在表单不合法时禁用提交按钮提交保存成功判断手机号是否重复验证两次输入的密码是否相同的自定义验证当值为空时，通过验证，因为有 Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox)，也实现了很多指令做为验证(required,...

cocopeak 2019-08-30 13:05 评论0 收藏0
AngularJS自定义表单验证

摘要：在自定义的指令中，我们可以添加我们的验证方法到的对象上。验证码在表单不合法时禁用提交按钮提交保存成功判断手机号是否重复验证两次输入的密码是否相同的自定义验证当值为空时，通过验证，因为有 Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox)，也实现了很多指令做为验证(required,...

xingpingz 2019-08-19 18:26 评论0 收藏0
ionic使用angularjs表单验证（模板验证）

摘要：会用指令来匹配这些具有验证功能的指令。每当表单控件中的值发生变化时，就会进行验证，并生成一个验证错误的列表对应着状态或者对应着状态。验证是否为空最大长度最小长度。则表示参数值校验不通过为，通过为。 1什么是模板验证顾名思义模板验证就是通过一些angularjs的属性来在html标签中验证，为了往模板驱动表单中添加验证机制，你要添加一些验证属性，就像原生的 HTML 表单验证器。 An...

Julylovin 2019-06-25 12:31 评论0 收藏0
ionic使用angularjs表单验证（模板验证）

摘要：会用指令来匹配这些具有验证功能的指令。每当表单控件中的值发生变化时，就会进行验证，并生成一个验证错误的列表对应着状态或者对应着状态。验证是否为空最大长度最小长度。则表示参数值校验不通过为，通过为。 1什么是模板验证顾名思义模板验证就是通过一些angularjs的属性来在html标签中验证，为了往模板驱动表单中添加验证机制，你要添加一些验证属性，就像原生的 HTML 表单验证器。 An...

williamwen1986 2019-08-05 15:44 评论0 收藏0