表单验证AngularJs
参考博客: https://www.cnblogs.com/rohelm/p/4033513.html
常用的表单验证指令
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" />
下面我们将这些表单验证放到具体的实现中来测试一下:
<div class="col-md-6"><form role="form" class="form-horizontal"><div class="form-group"><div class="col-md-4"><label for="name">1.必填项</label></div><div class="col-md-8"><input class="form-control" id="name" type="text" required ng-model='user.name' /></div></div><div class="form-group"><div class="col-md-4"><label for="minlength">2.最小长度=5</label></div><div class="col-md-8"><input type="text" id="minlength" ng-minlength="5" ng-model="user.minlength" class="form-control" /></div></div><div class="form-group"><div class="col-md-4"><label for="minlength">3.最大长度=20</label></div><div class="col-md-8"><input type="text" ng-model="user.maxlength" ng-maxlength="20" class="form-control" /></div></div><div class="form-group"><div class="col-md-4"><label for="minlength">4. 模式匹配</label></div><div class="col-md-8"><input type="text" id="minlength" ng-model="user.pattern" ng-pattern="/^[a-zA-Z]*\d$/" class="form-control" /></div></div><div class="form-group"><div class="col-md-4"><label for="email">5. 电子邮件</label></div><div class="col-md-8"><input type="email" id="email" name="email" ng-model="user.email" class="form-control" /></div></div><div class="form-group"><div class="col-md-4"><label for="age">6. 数字</label></div><div class="col-md-8"><input type="number" id="age" name="age" ng-model="user.age" class="form-control" /></div></div><div class="form-group"><div class="col-md-4"><label for="url"> 7. URL</label></div><div class="col-md-8"><input type="url" id="url" name="homepage" ng-model="user.url" class="form-control" /></div></div><div class="form-group text-center"><input class="btn btn-primary btn-lg" type="submit" value="提交" /></div></form> </div><div class="col-md-12">1.必填项:{{user.name}}<br>2.最小长度=5:{{user.minlength}}<br>3.最大长度=20:{{user.maxlength}}<br>4.模式匹配:{{user.pattern}}<br>5.电子邮件:{{user.email}}<br>6.数字:{{user.age}}<br>7.URL:{{user.url}}<br></div>
在测试中我们发现,只有当表达式满足验证,才会实时进行双向绑定。同时我们也发现,效果图如下:
似乎并没有发生什么问题,但是如果我们将其移植到一个队HTML5验证不怎么好的浏览器再来测试一下【本例IE9】,问题来了,某些字段完全没得验证
转载于:https://www.cnblogs.com/xumBlog/p/9940863.html
表单验证AngularJs相关推荐
- angularjs php登录验证,AngularJs表单验证的方法
Anjularjs表单验证 能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的.在人与人沟通的语境中,表单验证给出来的反馈同获得正确输入同等重要. 表单验证不仅能给用户提供有用的反馈,同时也能 ...
- angularJS 表单验证
通过angularJS 进行的表单验证需要在表单中设置novalidate属性 novalidate 属性在应用中不是必须的,但是你需要在 AngularJS 表单中使用,用于重写标准的 HTML5 ...
- angularjs的表单验证
angularjs的表单验证 废话:angular的热度在减小,但是老项目依旧是angular的,就是不能丢,得会 干活直接上代码 <!DOCTYPE html> <html> ...
- angularjs学习第四天笔记(第一篇:简单的表单验证)
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- AngularJS中的表单验证机制
客户端表单验证是AngularJS里面最酷的功能之一. AngularJS表单验证可以让你从一开始就写出一个具有交互性和可响应的现代化HTML5表单. angularJs实现了大多数的HTML5表单域 ...
- angularjs表单验证_AngularJS表单验证
angularjs表单验证 We have updated this article for Angular 1.3 and the new ng-touched feature. 我们已经为Angu ...
- AngularJS表单验证
表单 网页中用户于服务端交互数据的表单控件有input.select.textarea,而表单是将为了达到一个目的(登录.注册等)各种控件整合到一起的一个集合. 表单和其中的表单控件提供了验证服务,可 ...
- AngularJS自定义表单验证
Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox),也实现了很多指令做为验证(required ...
- AngularJS学习笔记(二) 表单验证案例(ng-repeat/filter)
这一节相对来说需要理解的东西不是太多,记住了那些api就行了. 还是一个案例(同样来自miaov),一个表单验证,先上代码,然后再对对应的内容进行解释. <!DOCTYPE html> & ...
最新文章
- 零基础入门学习Python,我与python的第一次亲密接触后的感受!
- 最新!QS发布2021亚洲大学排行榜!清华第二,浙大、复旦力压北大
- LruDiskCache要点--不可不用的磁盘缓存工具类
- Hibernate 参数设置一览表
- mysql 本周函数_【转】MySQL时间函数的使用:查询本周、下周、本月、下个月份的数据...
- 神策 2020 数据驱动用户大会主会场亮点回顾(内附回放)
- MySQL之GROUP BY用法误解
- 类与对象- 课后作业1
- 《系统工程师实战培训》-01-规划(附:原版课件)
- matlab 矩阵逻辑与,MATLAB自学笔记(七):数组运算与矩阵操作
- Spring Cloud微服务分布式云架构源码结构
- 深入浅出JavaScript之this
- 用matlab做bp神经网络预测,matlab神经网络怎么预测
- android移动控件位置
- 九阳神功,扎马练起!类、对象、实例、实例化的理解!
- oracle中取月初和月末的方法
- 嵌入式使用Zbar解析二维码
- 企业wms系统安装在云服务器,wms 云服务器 还是本地
- 2020-08-09 我来邀请码
- 红帽linux设置自动启动,RedHat开机启动流程