使用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 相关文章推荐
判断脚本加载是否完成的方法
May 26 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
使用js画图之正弦曲线
Jan 12 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
详解webpack 热更新优化
Sep 13 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 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中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
PHP取进制余数函数代码
2012/01/19 PHP
destoon常用的安全设置概述
2014/06/21 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
Zend Framework教程之Zend_Config_Xml用法分析
2016/03/23 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
Python自定义线程类简单示例
2018/03/23 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
struct和class的区别
2015/11/20 面试题
汽车维修专业自荐书
2014/05/26 职场文书
工程部经理岗位职责
2015/02/02 职场文书
医院党建工作总结2015
2015/05/26 职场文书
百年孤独读书笔记
2015/06/29 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS