angular表单验证
借助AngularJS,我们不需要花太多额外的精力就可以轻松实现客户端表单验证功能。虽然 Web应用安全不能完全依赖客户端验证,但客户端验证可以提供表单状态的实时反馈。
要使用表单验证,首先要确保表单有一个name属性。
所有输入字段都可以进行基本的验证,比如最大、最小长度等。这些功能是由新的HTML5 表单属性提供的。
如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加novalidate标记。
下面看一下可以在input元素上使用的所有验证选项。
必填项
验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可:<input type="text" required />
最小长度
验证表单输入的文本长度是否大于某个最小值,在输入字段上使用AngularJS指令ng-minleng= "{number}":<input type="text" ng-minlength="5" />
最大长度
验证表单输入的文本长度是否小于或等于某个最大值,在输入字段上使用AngularJS指令 ng-maxlength="{number}":<input type="text" ng-maxlength="20" />
模式匹配
使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式:<input type="text" ng-pattern="[a-zA-Z]" />
电子邮件
验证输入内容是否是电子邮件,只要像下面这样将input的类型设置为email即可:<input type="email" name="email" ng-model="user.email" />
数字
验证输入内容是否是数字,将input的类型设置为number:<input type="number" name="age" ng-model="user.age" />
URL
验证输入内容是否是URL,将input的类型设置为 url:<input type="url" name="homepage" ng-model="user.facebook_url" />
在表单中控制变量
表单的属性可以在其所属的$scope对象中访问到,而我们又可以访问$scope对象,因此 JavaScript可以间接地访问DOM中的表单属性。借助这些属性,我们可以对表单做出实时(和 AngularJS中其他东西一样)响应。这些属性包括下面这些。未修改的表单 formName.inputFieldName.$pristine 这是一个布尔属性,用来判断用户是否修改了表单。如果未修改,值为true,如果修改过值为false;修改过的表单 formName.inputFieldName.$dirty只要用户修改过表单,无论输入是否通过验证,该值都返回true:合法的表单 formName.inputFieldName.$valid这个布尔型的属性用来判断表单的内容是否合法。如果当前表单内容是合法的,下面属性的 值就是true:不合法的表单 formName.inputFieldName.$invalid 这个布尔属性用来判断表单的内容是否不合法。如果当前表单内容是不合法的,下面属性的 值为true:错误 formName.inputfieldName.$error如果验证失败,这个属性的值为true;如果值为false,说明输入字段的值通过了验证。
下面结合具体的例子,来运用上面的属性
<form novalidate="novalidate" name="myForm"><div><label>用 户 名:</label><input type="text" name="user" placeholder="请输入你的用户名" ng-model="user"ng-maxlength="10"ng-minlength="5"required ></br></div><div class="check"><p class="error" ng-if="myForm.user.$error.required && myForm.user.$touched">用户名不能为空</p><p class="error" ng-if="myForm.user.$error.maxlength || myForm.user.$error.minlength"> 用户名长度应该在5-10位之间</p></div><div><label>密 码:</label><input type="password"name="paw"placeholder="******"ng-model="paw"ng-minlength="6"ng-maxlength="10"required ></br></div><div class="check"><p class="error" ng-if="myForm.paw.$error.required && myForm.paw.$touched">密码不能为空</p><p class="error" ng-if="myForm.paw.$error.maxlength || myForm.paw.$error.minlength"> 密码长度应该在6-10位之间</p></div><div><label>重复密码:</label><input type="text"name="repaw"placeholder="******"ng-model="repaw"></br> </div><div class="check"> <p class="error" ng-if="repaw!=paw && myForm.paw.$touched">两次密码输入不一致</p></div><div><label>邮 箱:</label><input type="mail"name="mail"placeholder=""ng-model="mail"ng-pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$"></br></div><div class="check"><p class="error" ng-if=" myForm.phone.$error.pattern && myForm.phone.$touched">邮箱格式错误</p></div><div><label>手机号码:</label><input type="text"name="phone"placeholder="请输入手机号码"ng-model="phone"ng-pattern="/^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/"></br></div><div class="check"><p class="error" ng-if=" myForm.phone.$error.pattern && myForm.phone.$touched">手机号码格式错误</p></div><input type="submit"name="sub"value="提交"ng-submit="submit"></form>
angular表单验证相关推荐
- Angular 表单验证类库 ngx-validator 1.0 正式发布
背景介绍 之前写了一篇 <如何优雅的使用 Angular 表单验证>,结尾处介绍了统一验证反馈的类库 ngx-validator ,由于这段时间一直在新模块做微前端以及相关业务组件库,工具 ...
- 如何优雅的使用 Angular 表单验证
随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...
- angular js创建表单_如何优雅的使用 Angular 表单验证
随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...
- angular表单验证 1
表单验证 通常,我们都需要对用户的表单输入做验证,以保证数据的整体质量. Angular也有两种验证表单的形式: 使用属性验证,用于模板驱动表单: 使用验证器函数进行验证,用于响应式表单. 验证器(V ...
- Angular 表单验证
模板驱动验证 使用模板驱动验证需要依赖于原生的HTML表单验证器 Angular 会用指令来匹配具有验证功能的这些属性. 原生的HTMl验证器主要分两种 通过语义类型来进行定义 通过验证相关的属性来进 ...
- angularjs表单验证_AngularJS表单验证
angularjs表单验证 We have updated this article for Angular 1.3 and the new ng-touched feature. 我们已经为Angu ...
- Angular响应式表单及表单验证
1. 什么是响应式表单? 响应式表单提供了一种模型驱动的方式来处理表单输入,其中的值会随时间而变化. 响应式表单使用显示的,不可变的方式,管理表单在特定时间点上的状态.对表单状态的每一次变更都会返回一 ...
- Angular JS 中的内置方法之表单验证
angular js 结合html5 可以实现强大的表单验证功能 关闭html5自带的表单验证功能可以用 转载于:https://www.cnblogs.com/Pikzas/p/9005861.ht ...
- angular学习的一些小笔记(中)之表单验证
表单验证 我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlen ...
- angular中的表单验证
angular中的表单验证很强大, 一共有5中验证信息,$valid,$invalid,$pristine,$dirty,$error. $valid-----当验证通过的时候,为true,不通过的时 ...
最新文章
- 【C语言】算数操作符 移位操作符 以及 sizeof单目操作符讲解
- tRNAscan-SE 预测tRNA基因
- ServletContext2
- 计算机在现代教育主要应用,探讨计算机科学技术在现代教育中的应用
- 【渝粤教育】 国家开放大学2020年春季 1190当代中国政治制度 参考试题
- 删除归档_备份与归档的“罗生门”
- 彻底下载32位office2010
- lucene 分词实现
- C#接口编程实例解析[转]
- 图像识别从零写出dnf脚本关键要点
- Android路由器初始密码,了解路由器用户名和万能密码
- 香农码字matlab,香农编码的MATLAB实现.ppt
- java解决合并两个有序链表问题
- 教你怎么用三种办法找到发给你QQ的坦白说的那个人
- linux系统支持网银吗,Linux系统能使用网银吗?
- 二维码:MP3音频世界的进化
- heic照片格式怎么转换jpg?heic转换成jpg方法分享
- 计算机和影视结合专业,计算机专业专业建设总结与典型案例2.5微电影拍摄与后期制作(影视拍摄与后期制作技术)课....
- 通俗易懂的epoll
- 职称计算机pptt应用模块,2016年职称计算机考试PowerPoint单选练习题4