angularJ表单验证
常用的表单验证指令
1. 必填项验证
某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可:
<input type="text" required />
2. 最小长度
验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}":
<input type="text" ng-minlength="5" />
3. 最大长度
验证表单输入的文本长度是否小于或等于某个最大值,在输入字段上使用指令ng-maxlength="{number}":
<input type="text" ng-maxlength="20" />
4. 模式匹配
使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式:
<input type="text" ng-pattern="/[a-zA-Z]/" />
5. 电子邮件
验证输入内容是否是电子邮件,只要像下面这样将input的类型设置为email即可:
<input type="email" name="email" ng-model="user.email" />
6. 数字
验证输入内容是否是数字,将input的类型设置为number:
<input type="number" name="age" ng-model="user.age" />
7. URL
验证输入内容是否是URL,将input的类型设置为url:
<input type="url" name="homepage" ng-model="user.facebook_url" />
angularJ表单验证的更多相关文章
- jQuery学习之路(8)- 表单验证插件-Validation
▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
- 玩转spring boot——AOP与表单验证
AOP在大多数的情况下的应用场景是:日志和验证.至于AOP的理论知识我就不做赘述.而AOP的通知类型有好几种,今天的例子我只选一个有代表意义的“环绕通知”来演示. 一.AOP入门 修改“pom.xml ...
- form表单验证-Javascript
Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(33)-MVC 表单验证
系列目录 注:本节阅读需要有MVC 自定义验证的基础,否则比较吃力 一直以来表单的验证都是不可或缺的,微软的东西还是做得比较人性化的,从webform到MVC,都做到了双向验证 单单的用js实现的前端 ...
- 实现跨浏览器html5表单验证
div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...
- jQuery Validate 表单验证 — 用户注册简单应用
相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用. 可以先把我写的这个小demo运行试下,先睹为快.猛戳链接--> ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
- 走进AngularJs 表单及表单验证
年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...
随机推荐
- iOS学习13之OC NSString类
C语言中,字符串是有char(ASC||码)字符组成. OC中,字符串是由unichar(Unicode)字符组成. 1.字符串(NSString) NSString:不可变字符串,即:创建以后,内容 ...
- 跳转页面&回到上一页
1.php <?php header('Location:2.php'); //echo不能在其前面 echo '1'; 2.js <?php echo '2'; echo '<me ...
- 来自于2016.2.23的flag
正是中午,百废待兴,写点什么调节一会儿心情吧.正巧有许多的想法. 机房来了许多小朋友,多么像一年之前的我啊,想写题,心又纷乱,但不同的是他们比我强太多了. 停课是什么感觉?停课在机房与寒暑假.双休日在 ...
- 提高安全性而在HTTP响应头中可以使用的各种响应头字段
本文介绍在Web服务器做出响应时,为了提高安全性而在HTTP响应头中可以使用的各种响应头字段.由于部分浏览器中有可能对某些字段或选项不提供支持,所以在使用这些字段时请先确认客户端环境. X-Frame ...
- 封装一个通用递归算法,使用TreeIterator和TreeMap来简化你的开发工作。
在实际工作中,你肯定会经常的对树进行遍历,并在树和集合之间相互转换,你会频繁的使用递归. 事实上,这些算法在逻辑上都是一样的,因此可以抽象出一个通用的算法来简化工作. 在这篇文章里,我向你介绍,我封装 ...
- JS中的专业术语
本身虽然是学技术出身,但.....此处省略N个字符 1.Namespace 命名空间 允许开发人员在一个独特, 应用相关的名字的名称下捆绑所有功能的容器. 2.Class类 定义对象的特征.它是对象的 ...
- BZOJ3343: 教主的魔法 分块
2016-05-28 10:27:19 题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3343 比较显然的分块题,分块后块内排序,维护整块的附 ...
- ThinkPHP3.2.3--Linux服务器首页文件index.php路径配置问题
在windows服务器环境下,可以define ('SITE_URL','http://192.168.1.101/'); 但上传到linux服务器环境下不能正常解析,可使用相对路径:define ( ...
- asp.net 操作Excel大全
asp.net 操作Excel大全 转:http://www.cnblogs.com/zhangchenliang/archive/2011/07/21/2112430.html 我们在做excel资 ...
- 【android tools】内存、网络、界面性能响应优化的工具
一.性能优化工具 性能分析,我理解有内存性能,IO性能, 界面性能,耗电等. 内存性能,用debuggable的app结合mat等专业工具可以分析.另外最近的Leakcanary很好用,但是要手动加入 ...