使用AngularJS对表单提交内容进行验证的操作方法
AngularJS是一款优秀的前端JS框架，已经被用于Google的多款产品当中。它有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等……使用它可以大大减少书写代码的工作量，但和Jquery不同，使用AngularJS有一定的难度，因此今天我将介绍以下怎样使用AngularJS来对表单的提交内容进行验证。
AngularJS对表单中常用的验证操作
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录
$error 表单验证不通过的错误信息
1.相关插件的导入：AngularJS和Jquery一样，是一种由程序员用js编写好然后封装起来的js插件，因此在使用之前要用以下代码来导入它。
<script src="libs/angular.js"></script>
注：该js插件最好放在body之后，自己写的js代码则放在AngularJS之后防止产生错误。
2.在导入完AngularJS插件之后，我们首先要在body中创建一个form表单，用于接下来的操作，然后在表单上或者body上加上ng-app=""属性来确定AngularJS的作用域，一般
推荐加在body上。
<body ng-app="app" ng-controller="ctrl"></body>
注：ng-controller="ctrl"用于设置控制器。
3.给form表单和input的name属性命名，给form及input设置name后会将form表单信息默认绑定到$scope作用域中，故可以使用formName.inputName.$验证操作 得到验证结果。
<form class="form-horizontal" name="myForm" novalidate> <input type="text" name="name" > <input type="email" name="mail"> <input type="password" name="pwd" > </form>
novalidata用于禁止h5自带的表单验证，防止多余影响。
例如：
myForm.text.$dirty="true";表单被填写过 myForm.text.$invalid"true";表单输入不合法 myForm.text.$error.required="true";表单必填但未填。
4.给input加上对应的验证：
<input type="text" name="name" ng-minlength="4" ng-maxlength="10" required ng-class="{erro:myForm.name.$invalid&&myForm.name.$dirty}"/>
<input type="email" name="mail" required />
<input type="password" name="pwd" ng-model="user.pwd" pattern="^\w{6,18}$"/>
注：
以上代码对text设置了最小长度4，最大长度10，必填的验证信息，
对email则使用了email自带验证，增加了必填要求，
对password则是设置了正则验证要求是6到18位的字母数字下划线。
5.给提交按钮加上ng-disabled="myForm.$dirty&&myForm.$invalid"属性在表单输入不合法时将按钮禁用来阻止表单内容提交。
注：myForm.$dirty&&myForm.$invalid表示在表单有输入的情况下输入错误。
以上步骤完成之后表单的验证就完成了，也可以加上span的ng-show="myForm.name.$invalid&&myForm.name.$dirty"属性来设置在不同错误时出现不同的提示信息，这样，一个可以验证是否提交的表单就完成了。
以上所述是小编给大家介绍的使用AngularJS对表单提交内容进行验证的操作方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章给大家介绍了如何利用AngularJs实现京东首页轮播图的效果，本文通过示例代码详细介绍了实现过程，对大家学习AngularJS具有一定参考借鉴价值，有需要的朋友们可以参考借鉴。2016-09-09
Angularjs中$http以post请求通过消息体传递参数的实现方法
这篇文章主要介绍了Angularjs中$http以post请求通过消息体传递参数的方法,结合实例形式分析了$http使用post请求传递参数的相关设置与使用技巧,需要的朋友可以参考下2016-08-08
Angular 是一款开源 JavaScript 框架，使开发和测试变得更加容易,这篇文章主要介绍了详解Angular 开发环境搭建,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了Angular脚手架开发的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了AngualrJs清除定时器遇到的坑,需要的朋友可以参考下2017-10-10
这篇文章主要介绍了Angular实现form自动布局的相关资料，以代码片段的形式分析了Angular实现form自动布局的实现方法，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要和大家一起探索模拟angular的双向绑定，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了详解Angular2 关于*ngFor 嵌套循环，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
本篇文章主要介绍了详解如何在Angular中快速定位DOM元素，非常具有实用价值，需要的朋友可以参考下2017-05-05
这篇文章主要为大家详细介绍了9种改善AngularJS性能的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
最新评论