使用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吗?
Feb 24 Javascript
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
Mar 30 Javascript
d3.js实现立体柱图的方法详解
Apr 28 Javascript
vue-resouce设置请求头的三种方法
Sep 12 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 Javascript
javascript实现留言板功能
Feb 08 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
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
python爬虫框架talonspider简单介绍
2017/06/09 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
django 微信网页授权登陆的实现
2019/07/30 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
Django实现文件上传下载
2019/10/06 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
鱼油专家:Omegavia
2016/10/10 全球购物
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
施工资料员岗位职责
2014/01/06 职场文书
义和团口号
2014/06/17 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python