使用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 相关文章推荐
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
浅析java线程中断的办法
Jul 29 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
vue中 v-for循环的用法详解
Feb 19 Javascript
vue实现打地鼠小游戏
Aug 21 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
Smarty模板快速入门
2007/01/04 PHP
获得Google PR值的PHP代码
2007/01/28 PHP
php抓取https的内容的代码
2010/04/06 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
javascript 表单验证常见正则
2009/09/28 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
Sanic框架应用部署方法详解
2018/07/18 Python
python支持多线程的爬虫实例
2019/12/21 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
canvas像素画板的实现代码
2018/11/21 HTML / CSS
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
杭州时比特电子有限公司SQL
2013/08/22 面试题
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
大学生毕业求职简历的自我评价
2013/10/24 职场文书
商务英语专业应届毕业生求职信
2013/10/28 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
学生期末评语大全
2014/04/30 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
vue中 this.$set的使用详解
2021/11/17 Vue.js