注:本文所述的表单验证即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 表单验证小结的更多相关文章

  1. angularjs表单验证checkbox

    angularjs中默认有表单验证的支持,见文末的refer 我想要验证至少要选择一个checkbox,否则就不能提交 但是checkbox貌似没有简单的方法,想来想去给出下面的解决方案 valida ...

  2. 【AngularJS学习笔记】AngularJS表单验证

    AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty   表单有填写记录 3.$v ...

  3. AngularJS表单验证实现方法详解

    本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识,希望通过本文的分享,对大家学习AngularJS有所帮助. 1.常规表单验证: 2.AngularJs中提供的表单验证实例. 实 ...

  4. AngularJs表单验证

    常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" requir ...

  5. [Angularjs]表单验证

    写在前面 在开发中提交表单,并对表单的值进行验证是非常常见的操作,angularjs对表单验证提供了非常好的支持. demo 表单 <form name="myform" n ...

  6. AngularJS表单验证,手动验证或自动验证

    AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证. 手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件:1.给form元 ...

  7. angularjs 表单验证(不完整版)

    针对项目实践表单验证总结: angular 的 form表单验证:form内需要novalidate取消默认验证,用ng自己的验证,form的名字是非常必要的 栗子:以注册为栗子,下面是注册的部分: ...

  8. 彻底弄懂angularJS表单验证

    常用的表单验证指令 (基本概念) 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" ...

  9. AngularJS表单验证开发案例

    angular支持IE8+浏览器,虽然性能很好,但是目前只适用于手机端项目 知识点:域$scopeAngularJS基础指令指令实现不同的功能学习思路和方法 <link rel="st ...

随机推荐

  1. [转]ubuntu 13.04 体验wine qq

    1.首先安装最新版的wine1.52,没记错版本号应该是这个 sudo add-apt-repository ppa:ubuntu-wine/ppa sudo apt-get update sudo ...

  2. 微信公众号开发《一》OAuth2.0网页授权认证获取用户的详细信息,实现自动登陆

    原创声明:本文为本人原创作品,绝非他处转账,转载请联系博主 从接触公众号到现在,开发维护了2个公众号,开发过程中遇到很多问题,现在把部分模块功能在这备案一下,做个总结也希望能给其他人帮助 工欲善其事, ...

  3. openMP编程(上篇)之并行程序设计

    openMP简介 openMP是一个编译器指令和库函数的集合,主要是为共享式存储计算机上的并行程序设计使用的. 当计算机升级到多核时,程序中创建的线程数量需要随CPU核数变化,如在CPU核数超过线程数 ...

  4. 详细解释什么是JavaEE?

    也许你学习了那么久的Java了,但如果有人问你什么是JavaEE?你会怎么回答他呢?在此我来谈谈关于JavaEE的相关技术.(仅是个人见解) 在谈JavaEE时,我们首先来了解一下Java平台.目前, ...

  5. css3特别篇图解FlexBox

    图文转自微博网友勾三股四 一.flex-direction 二.flex-wrap 三.justify-content 四.align-items 五.align-content

  6. JavaScript里面的居民们1-数据

    编码 首先练习数字相关的一些操作: <div> <label>Number A:<input id="radio-a" type="radi ...

  7. vue-router 的使用

    vue-router 是 vue  的  一个特色. 下面介绍vue-router 的使用: 一.先将vue-router作为vue 的一个插件使用 import Vue from 'vue' imp ...

  8. VMWARE错误-"VirtualInfrastructure.Utils.ClientsXml"的类型初始值设定项引发异常

    异常信息:"VirtualInfrastructure.Utils.ClientsXml"的类型初始值设定项引发异常. 解决方案:以管理员的身份运行客户程序

  9. Keras 时序模型

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/Thinking_boy1992/article/details/53207177 本文翻译自 时序模 ...

  10. strace for Android

    使用strace for Android跟踪系统调用过程方便后续的so文件分析 http://benno.id.au/blog/2007/11/18/android-runtime-stracehtt ...