AngularJS中如何实现表单验证功能-创新互联

小编给大家分享一下AngularJS中如何实现表单验证功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

成都创新互联公司服务项目包括鹤城网站建设、鹤城网站制作、鹤城网页制作以及鹤城网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，鹤城网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到鹤城省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的。在人与人沟通的语境中，表单验证给出来的反馈同获得正确输入同等重要。

　　表单验证不仅能给用户提供有用的反馈，同时也能保护我们的Web应用不会被恶意或者错误的输入所破坏。我们要在Web前端尽力保护后端。

　　AngularJS能够将HTML5表单验证功能同它自己的验证指令结合起来使用，并且非常方便。AngularJS提供了很多表单验证指令。


  Your email

要使用表单验证，首先要确保表单像上面的例子一样有一个 name 属性。

　　所有输入字段都可以进行基本的验证，比如大、最小长度等。这些功能是由新的HTML5表单属性提供的。

　　如果想要屏蔽浏览器对表单的默认验证行为，可以在表单元素上添加 novalidate 标记

1. 必填项 required

　　验证某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记 required 即可：

　　注释：required 属性适用于以下类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file

2. 最小长度 ng-minleng="{number}"

　　验证表单输入的文本长度是否大于某个最小值，在输入字段上使用AngularJS指令 ng-minleng="{number}"

3. 大长度 ng-maxlength="{number}"

　　验证表单输入的文本长度是否小于或等于某个大值，在输入字段上使用AngularJS指令 ng-maxlength="{number}"

4. 模式匹配 ng-pattern="/PATTERN/"

使用 ng-pattern="/PATTERN/" 来确保输入能够匹配指定的正则表达式：

5. 电子邮件

　　验证输入内容是否是电子邮件，只要像下面这样将 input 的类型设置为 email 即可：

6. 数字

　　验证输入内容是否是数字，将 input 的类型设置为 number ：

7. URL

　　验证输入内容是否是URL，将 input 的类型设置为 url ：

在表单中控制变量

　　表单的属性可以在其所属的 $scope 对象中访问到，而我们又可以访问 $scope 对象，因此JavaScript可以间接地访问DOM中的表单属性。借助这些属性，我们可以对表单做出实时(和AngularJS中其他东西一样)响应。这些属性包括下面这些。(注意，可以使用下面的格式访问这些属性。)

formName.inputFieldName.property

■未修改的表单

　　这是一个布尔属性，用来判断用户是否修改了表单。如果未修改，值为 true ，如果修改过值为 false

formName.inputFieldName.$pristine

■修改过的表单

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

formName.inputFieldName.$dirty

■合法的表单

　　这个布尔型的属性用来判断表单的内容是否合法。如果当前表单内容是合法的，下面属性的值就是 true ：

formName.inputFieldName.$valid

■ 不合法的表单

　　这个布尔属性用来判断表单的内容是否不合法。如果当前表单内容是不合法的，下面属性的值为 true ：

formName.inputFieldName.$invalid

■ 错误

　　这是AngularJS提供的另外一个非常有用的属性： $error 对象。它包含当前表单的所有验证内容，以及它们是否合法的信息。用下面的语法访问这个属性：

formName.inputfieldName.$error

$parsers

　　当用户同控制器进行交互，并且 ngModelController 中的 $setViewValue() 方法被调用时，$parsers 数组中的函数会以流水线的形式被逐个调用。第一个 $parse 被调用后，执行结果会传递给第二个 $parse ，以此类推

　　这些函数可以对输入值进行转换，或者通过 $setValidity() 函数设置表单的合法性。

　　使用 $parsers 数组是实现自定义验证的途径之一。

　　例如，假设我们想要确保输入值在某两个数值之间，可以在 $parsers 数组中入栈一个新的函数，这个函数会在验证链中被调用。

　　每个 $parser 返回的值都会被传入下一个 $parser 中。当不希望数据模型发生更新时返回undefined 。

html




  
  
  表单测试
  
  


  
    
      
      good
      bad
      {{ testForm.inputs.$valid }}
      {{ testForm.inputs.$invalid }}
      {{ obj.number }}

javascript ( test5app.js )

angular.module('myApp', []).controller('TestController', function($scope) {
  $scope.obj = {
    number: 34
  }
}).directive('ngTest', function() {
  return {
    require: '?ngModel',
    restrict: 'AE',
    link: function($scope, iElm, iAttrs, ngModel) {
      if (!ngModel) return;
      ngModel.$parsers.push(function(viewValue) {
        var num = parseInt(viewValue);
        if (num >= 0 && num < 99) {
          ngModel.$setValidity('test', true);
          return viewValue
        } else {
          ngModel.$setValidity('test', false);
          return undefined
        }
      })
    }
  }
});

以上是“AngularJS中如何实现表单验证功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站名称：AngularJS中如何实现表单验证功能-创新互联
分享地址：http://cqcxhl.cn/article/ceeosd.html

重庆分公司，新征程启航

AngularJS中如何实现表单验证功能-创新互联

其他资讯