使用AngularJS对表单提交内容进行验证的操作方法


Posted in Javascript onJuly 12, 2017

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对表单提交内容进行验证的操作方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript编程起步(第二课)
Jan 10 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
js文件缓存之版本管理详解
Jul 05 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 Javascript
原生JavaScript实现刮刮乐
Sep 29 Javascript
JQuery EasyUI的一些常用组件
Jul 12 #jQuery
JavaScript严格模式下关于this的几种指向详解
Jul 12 #Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 #jQuery
详解如何用webpack打包一个网站应用项目
Jul 12 #Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 #Javascript
AngularJS实现select的ng-options功能示例
Jul 12 #Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 #Javascript
You might like
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
python中实现php的var_dump函数功能
2015/01/21 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
python删除文本中行数标签的方法
2018/05/31 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
使用npy转image图像并保存的实例
2020/07/01 Python
小学生安全保证书
2014/02/01 职场文书
致裁判员加油稿
2014/02/08 职场文书
一年级班主任感言
2014/03/08 职场文书
节约用电标语
2014/06/17 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
2014年防汛工作总结
2014/12/08 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书