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="" ng-maxlength="" 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对表单提交内容进行验证的更多相关文章

  1. AngularJS 表单提交后显示验证信息与失焦后显示验证信息

    虽然说AngularJS的实时表单验证非常有用,非常高效方便,但是当用户还没有完成输入时便弹出一个错误提示,这种体验是非常糟糕的. 正常的表单验证逻辑应该是在用户提交表单后或完成当前字段中的输入后,再 ...

  2. EasyUI中在表单提交之前进行验证

    使用EasyUi我们可以在客户端表单提交之前进行验证,过程如下:只需在onSubmit的时候使用return  $("#form1").form('validate')方法即可,E ...

  3. Form表单提交，js验证

    Form表单提交,js验证 1,  Onclick() 2, Onsubmit() Button标签 input (属性 submit  button )标签 Input type=button    ...

  4. PHP对表单提交特殊字符的过滤和处理

    PHP关于表单提交特殊字符的处理方法做个汇总,主要涉及htmlspecialchars/addslashes/stripslashes/strip_tags/mysql_real_escape_str ...

  5. php+mysql 除了设置主键防止表单提交内容重复外的另一种方法

    感觉好久没有更新博客了,一直在做网站及后台,也没有遇到让我觉得可以整理的内容,之前做的一个系统,已经完成了,后来客户又要求加一个功能,大概就是表单提交的时候,约束有一项不能和以前的内容重复,如图 比如 ...

  6. AngularJs 表单提交按钮状态

    表单属性: $invalid:未经过验证的表单,就是表单里面信息通过验证就为false,没有通过为true $valid:经过验证的表单,表单里信息验证通过为true,反之为false $dirty: ...

  7. form的onsubmit事件--表单提交前的验证最佳实现方式

    今天遇到了一个问题,页面中include了很多的公共页面(都是没有form的),并且里面好多的地方都是自行提交的(页面中加入一个type=“submit”域,然后js中写入sumbit.click来执 ...

  8. PHP开发之旅-提取表单提交内容发送邮件

    在实际项目开发中,我们经常需要得到用户的反馈信息并及时回复.普通的留言板有一定的内容限制,而邮件则能满足这个需求.今天给大家演示一下怎么利用PHP发送电子邮件. 1.创建表单 <form nam ...

  9. （十七）springMvc 对表单提交的日期以及JSON中的日期的参数绑定

    文章目录 前言 `Ajax`提交表单数据 `Ajax`提交`JSON` 格式数据 解决输出JSON乱码的问题 控制JSON输出日期格式 小记 前言 springMVC 提供强大的参数绑定功能,使得我们 ...

随机推荐

  1. 【Redis】 make编译是提示 make cc Command not found

    在linux系统上对redis源码进行编译时提示提示“make cc Command not found,make: *** [adlist.o] Error 127”. 这是由于系统没有安装gcc环 ...

  2. 【CSS系列】对表单和数据表格应用样式

    表格特有的元素: 1.summary和caption caption用作与表格的标题.summary应用于表格标签,用来描述表格的内容,于image标签的alt文本相似. 2.thead tbody ...

  3. WannaCry应急排查思路

    一.绪论: WannaCry是一款基于NSA的永恒之蓝漏洞(SMB-MS17-010)类似蠕虫似传播的一款勒索软件(Ransomware).一旦中招,该勒索病毒会对系统中的各种文件进行加密,比要求支付 ...

  4. 【BZOJ2743】[HEOI2012]采花 离线+树状数组

    [BZOJ2743][HEOI2012]采花 Description 萧芸斓是Z国的公主,平时的一大爱好是采花. 今天天气晴朗,阳光明媚,公主清晨便去了皇宫中新建的花园采花.花园足够大,容纳了n朵花, ...

  5. for update 和 t.rowid的区别

    select * from table_name for update; 和 select t.*, t.rowid from table_name t 的区别 前者会对你查询出来的结果加上锁,而后者 ...

  6. jvm的内存模型

    转自:https://www.cnblogs.com/dingyingsi/p/3760447.html 我们知道,计算机CPU和内存的交互是最频繁的,内存是我们的高速缓存区,用户磁盘和CPU的交互, ...

  7. redis link 链表结构

    lpush key value 作用: 把值插入到链接头部 rpop key 作用: 返回并删除链表尾元素 lrange key start stop 作用: 返回链表中[start ,stop]中的 ...

  8. ROM和RAM的故事

    在公众号里看到一篇很好的文章讲解rom和ram,之前也是一直不能理解两者的区别,今天就转载记下来吧.也方便大家学习. 因为我刚开始学习的时候总喜欢刨根问底,一个问题要是不搞清楚,后面学习都会很吃力的. ...

  9. Pandas介绍

    pandas是python非常好用的一个数据结构包,包含有许多数据操作的方法,能够让你快速简便的提取和保存数据,节省你在这块的数据流操作耗时,从而让你更加专注于逻辑的设计和算法的设计.很多算法的相关库 ...

  10. Log4j最简入门及实例

    Log4j真的很简单,简单到令人发指的地步.不是要记录日志吗?那就给你一个Log,然后你用Log来写东西就行了,先来一个完整类示例: package test; import org.apache.c ...