AngularJS 表单验证小结
注:本文所述的表单验证即AngularJS自带的表单验证,无需引入第三方的插件
一、常用的验证特性标签
1.非空
为input加入一个required属性即可,例如:
<input type="text" required>
2.最大长度,最小长度
为input加上ng-maxlength或者ng-minlength属性,并且属性值为需要设置的长度,例如:
<input type="text" ng-minlength="5" ng-maxlength="20" />
3.邮箱
将input的type设置为email即可,例如:
<input type="email"/>
4.数字
与邮箱同理,将type设置为number<input type="number"/>
5.URL
将type设置为url
6.正则表达式
使用ng-pattern来指定正则表达式,例如:<input type="text" ng-pattern="/[a-zA-Z]/" />
还有非常多的特性,等待大家探索......
二、验证消息的展示
1.$invalid和$valid
例:<span ng-show="model.$invalid" class="text-danger">error message.</span>
表单name.字段名.$invalid 或者 表单name.字段名.$valid 中获得验证是否通过,最终来决定验证消息是否显示,如果是获取表单中所有元素是否通过验证,直接使用 表单name.$invalid 或者 表单name.$valid
$valid是通过验证时为true,不通过为false,$invalid是没有通过验证时为true,不通过为false.
2.$error
$error中会包含比较详细的错误信息,包括错误类型,错误消息,错误的字段等等~
下面是我抓取的一段整个form表单的$error信息,具体的可以参考一下angular的文档,这里我也没有去深入研究。
{"required":[{"$validators":{},"$asyncValidators":{},"$parsers":[],"$formatters":[null],"$viewChangeListeners":[],"$untouched":true,"$touched":false,"$pristine":true,"$dirty":false,"$valid":false,"$invalid":true,"$error":{"required":true},"$name":"bookName","$options":null},{"$validators":{},"$asyncValidators":{},"$parsers":[],"$formatters":[null],"$viewChangeListeners":[null],"$untouched":true,"$touched":false,"$pristine":true,"$dirty":false,"$valid":false,"$invalid":true,"$error":{"required":true},"$name":"isbn","$options":null},{"$validators":{},"$asyncValidators":{},"$parsers":[],"$formatters":[null],"$viewChangeListeners":[],"$untouched":true,"$touched":false,"$pristine":true,"$dirty":false,"$valid":false,"$invalid":true,"$error":{"required":true},"$name":"author","$options":null},{"$validators":{},"$asyncValidators":{},"$parsers":[],"$formatters":[null],"$viewChangeListeners":[],"$untouched":true,"$touched":false,"$pristine":true,"$dirty":false,"$valid":false,"$invalid":true,"$error":{"required":true},"$name":"price","$options":null},{"$validators":{},"$asyncValidators":{},"$parsers":[],"$formatters":[null],"$viewChangeListeners":[],"$untouched":true,"$touched":false,"$pristine":true,"$dirty":false,"$valid":false,"$invalid":true,"$error":{"required":true},"$name":"pressDate","$options":null},{"$validators":{},"$asyncValidators":{},"$parsers":[],"$formatters":[null],"$viewChangeListeners":[],"$untouched":true,"$touched":false,"$pristine":true,"$dirty":false,"$valid":false,"$invalid":true,"$error":{"required":true},"$name":"description","$options":null}]}
$error的用法同$valid,需要获取哪个字段的就是 表单name.字段name.$error
AngularJS 表单验证小结的更多相关文章
- angularjs表单验证checkbox
angularjs中默认有表单验证的支持,见文末的refer 我想要验证至少要选择一个checkbox,否则就不能提交 但是checkbox貌似没有简单的方法,想来想去给出下面的解决方案 valida ...
- 【AngularJS学习笔记】AngularJS表单验证
AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty 表单有填写记录 3.$v ...
- AngularJS表单验证实现方法详解
本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识,希望通过本文的分享,对大家学习AngularJS有所帮助. 1.常规表单验证: 2.AngularJs中提供的表单验证实例. 实 ...
- AngularJs表单验证
常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" requir ...
- [Angularjs]表单验证
写在前面 在开发中提交表单,并对表单的值进行验证是非常常见的操作,angularjs对表单验证提供了非常好的支持. demo 表单 <form name="myform" n ...
- AngularJS表单验证,手动验证或自动验证
AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证. 手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件:1.给form元 ...
- angularjs 表单验证(不完整版)
针对项目实践表单验证总结: angular 的 form表单验证:form内需要novalidate取消默认验证,用ng自己的验证,form的名字是非常必要的 栗子:以注册为栗子,下面是注册的部分: ...
- 彻底弄懂angularJS表单验证
常用的表单验证指令 (基本概念) 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" ...
- AngularJS表单验证开发案例
angular支持IE8+浏览器,虽然性能很好,但是目前只适用于手机端项目 知识点:域$scopeAngularJS基础指令指令实现不同的功能学习思路和方法 <link rel="st ...
随机推荐
- [转]ubuntu 13.04 体验wine qq
1.首先安装最新版的wine1.52,没记错版本号应该是这个 sudo add-apt-repository ppa:ubuntu-wine/ppa sudo apt-get update sudo ...
- 微信公众号开发《一》OAuth2.0网页授权认证获取用户的详细信息,实现自动登陆
原创声明:本文为本人原创作品,绝非他处转账,转载请联系博主 从接触公众号到现在,开发维护了2个公众号,开发过程中遇到很多问题,现在把部分模块功能在这备案一下,做个总结也希望能给其他人帮助 工欲善其事, ...
- openMP编程(上篇)之并行程序设计
openMP简介 openMP是一个编译器指令和库函数的集合,主要是为共享式存储计算机上的并行程序设计使用的. 当计算机升级到多核时,程序中创建的线程数量需要随CPU核数变化,如在CPU核数超过线程数 ...
- 详细解释什么是JavaEE?
也许你学习了那么久的Java了,但如果有人问你什么是JavaEE?你会怎么回答他呢?在此我来谈谈关于JavaEE的相关技术.(仅是个人见解) 在谈JavaEE时,我们首先来了解一下Java平台.目前, ...
- css3特别篇图解FlexBox
图文转自微博网友勾三股四 一.flex-direction 二.flex-wrap 三.justify-content 四.align-items 五.align-content
- JavaScript里面的居民们1-数据
编码 首先练习数字相关的一些操作: <div> <label>Number A:<input id="radio-a" type="radi ...
- vue-router 的使用
vue-router 是 vue 的 一个特色. 下面介绍vue-router 的使用: 一.先将vue-router作为vue 的一个插件使用 import Vue from 'vue' imp ...
- VMWARE错误-"VirtualInfrastructure.Utils.ClientsXml"的类型初始值设定项引发异常
异常信息:"VirtualInfrastructure.Utils.ClientsXml"的类型初始值设定项引发异常. 解决方案:以管理员的身份运行客户程序
- Keras 时序模型
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/Thinking_boy1992/article/details/53207177 本文翻译自 时序模 ...
- strace for Android
使用strace for Android跟踪系统调用过程方便后续的so文件分析 http://benno.id.au/blog/2007/11/18/android-runtime-stracehtt ...