使用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 相关文章推荐
JqGrid web打印实现代码
May 31 Javascript
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
JQuery中dataGrid设置行的高度示例代码
Jan 03 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
javascript中layim之查找好友查找群组
Feb 06 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
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
PHP实现的策略模式示例
2019/03/20 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
js+html制作简单验证码
2017/02/16 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
vue如何截取字符串
2019/05/06 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
Python Merge函数原理及用法解析
2020/09/16 Python
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
办理生育手续介绍信
2014/01/14 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
QT与javascript交互数据的实现
2021/05/26 Javascript
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers