在AngularJS中能够将HTML5表单验证功能同自己的验证指令结合起来使用,这里介绍使用的核心功能。

  1. 使用表单验证,首先要确保表单的每个控件都有name属性
  2. 如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加novalidate标记。

必填项;只需要在输入字段元素上添加HTML5标记 required即可

最小长度;在输入字段上使用AngularJS指令ng-minlength="{number}"

最大长度;在输入字段上使用AngularJS指令ng-maxlength="{number}"

模式匹配;使用ng-pattern="[a-zA-Z]"来确保输入能够匹配指定的正则表达式

电子邮件;只要将input的类型设置为email即可

数字;将input的类型设置为number

URL;验证输入内容是否是url地址,将input类型设置为url

AngularJS复习------表单验证的更多相关文章

  1. 基于angularJS的表单验证练习

    今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa" ...

  2. angularjs的表单验证

    angularjs内置了常用的表单验证指令,比如min,require等.下面是演示: <!DOCTYPE html> <html> <head> <meta ...

  3. 【AngularJs】---表单验证

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

  4. angularJS 过滤器 表单验证

    过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)D ...

  5. AngularJS 的表单验证

    最近开始学习angularjs,学到表单验证的时候发现有必要学习下大神的好文章: 转:http://www.oschina.net/translate/angularjs-form-validatio ...

  6. AngularJs实现表单验证

    首先,我们应该知道,表单中,常用的验证操作有: $dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine 表单没有填写记录 $error 表单 ...

  7. 夺命雷公狗—angularjs—3—表单验证的高级用法

    其实我们的angularjs都是是块状代码,其实是可以在实际开发中保存下来以后就可以达到重复利用的目的了.. 废话不多说,直接上代码: <!doctype html> <html l ...

  8. AngularJS form表单验证(非常全面)

    构建一个ng表单 novalidate=”novalidate” 2.form中不能有action属性.提交交由ng-submit处理 3.每个input一定要有ng-model,最好有一个name方 ...

  9. AngularJS的表单验证提交示例

    代码下载:https://files.cnblogs.com/files/xiandedanteng/angularjsFormSubmit.rar 前台代码: <%@ page content ...

随机推荐

  1. 解析XML的方法

    解析XML的方法 1.DOM生成和解析XML 2.SAX生成和解析XML 3.DOM4J生成和解析XML 4.JDOM生成和解析XML

  2. org.apache.catalina.LifecycleException: Failed to start component

    1.错误描述 Using CATALINA_BASE: "D:\NetBeans\apache-tomcat-8.0.12" Using CATALINA_HOME: " ...

  3. ORA-00904:标识符无效

    1.错误描述 ORA-00904:"TTT"."RN":标识符无效 00904 . 00000 - "%s:invalid identifier&qu ...

  4. Axure RP一个专业的快速原型设计工具

    Axure RP是一个专业的快速原型设计工具.Axure(发音:Ack-sure),代表美国Axure公司:RP则是Rapid Prototyping(快速原型)的缩写. Axure简要介绍 Axur ...

  5. Hibernate【缓存】知识要点

    对象状态 Hibernate中对象的状态: 临时/瞬时状态 持久化状态 游离状态 学习Hibernate的对象状态是为了更清晰地知道Hibernate的设计思想,以及是一级缓存的基础...当然啦,也就 ...

  6. form表单的action提交写到js中来,同时onclick事件也写在js中来。其action也可以通过ajax来提交的。

    1,html脚本 <body> <div style="display: none;"> <form id="submitForm" ...

  7. 【Luogu3041】视频游戏的连击(AC自动机,动态规划)

    题面链接 题解 首先构建出AC自动机 然后在AC自动机上面跑DP 转移很显然从Trie树的节点跳到他的儿子节点 但是要注意一个问题, 在计算的时候,每一个节点加入后能够 造成的贡献 要加上他的子串的贡 ...

  8. C#服务器端生成报告文档:使用帆软报表生成Word、Pdf报告

    一.帆软报表简介 报表工具中,帆软报表相比Crystal Report(水晶报表).SQL Server Report Service(SSRS)等报表工具来说算是佼佼者,此外帆软报表在统计图表.数据 ...

  9. HDFS配额管理(实战)

    概述: Hadoop分布式文件系统(HDFS)允许管理员为使用的名称和单独目录使用的空间数量设置配额.名称配额和空间配额是独立运作的,但这两类配额的管理和实施是密切相关的. Name Quotas: ...

  10. 完全卸载hadoop安装的组件(hdp版本)

    yum remove -y hadoop_* zookeeper* ranger* hbase_* ranger* hbase_* ambari-* hadoop_* zookeeper_* hbas ...