AngularJS 输入验证
2016-04-27 22:14
615 查看
AngularJS 输入验证
常用指令
1. 必填项验证
验证某个输入项是否已填写,只要在输入字段元素上添加required 标记(HTML5)
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必输</span>
</span>
屏蔽浏览器对表单的默认验证行为
4000
常用指令
1. 必填项验证
验证某个输入项是否已填写,只要在输入字段元素上添加required 标记(HTML5)
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必输</span>
</span>
2. 最大/小长度
使用指令:<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13.9200000762939px; line-height: 20.8800010681152px;">ng-maxleng= "{number}"/<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13.9200000762939px; line-height: 20.8800010681152px;">ng-minleng= "{number}"</span></span><pre name="code" class="html"><input type="text" ng-model="userName" name="name" ng-minlength="5" ng-maxlength="20"/>3. 模式匹配
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13.9200000762939px; line-height: 20.8800010681152px;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13.9200000762939px; line-height: 20.8800010681152px;">使用指令ng-pattern="/reg/"</span></span>
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13.9200000762939px; line-height: 20.8800010681152px;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13.9200000762939px; line-height: 20.8800010681152px;"></span></span><pre name="code" class="html"><input type="text" ng-pattern="/[a-zA-Z]/" />4. 邮件/数字/URL
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 20.8800010681152px;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 20.8800010681152px;"><span style="font-size: 13.9200000762939px;">验证输入内容是否是电子邮件/数字/URL,只需将input的类型设置为“email”,"number","URL" </span></span></span><pre name="code" class="html" style="font-size: 13.9200000762939px;"><input type="email" name="email" ng-model="user.email" />
<input type="number" name="age" ng-model="user.age" />
<input type="url" name="homepage" ng-model="user.facebook_url" />
屏蔽浏览器对表单的默认验证行为
<span style="font-size:10px;">在表单元素上添加novalidate标记即可(可以使用formName.inputFieldName.property).</span>
<pre name="code" class="html"><span style="font-size:10px;"> A:formName.inputFieldName.$pristine:表示用户是否修改了表单,true:表示没有修改过</span>
<span style="font-size:10px;"> B:formName.inputFieldName.$dirty:当且仅当用户实际已经修改的表单,不管表单是否验证通过</span>
<span style="font-size:10px;"> C:formName.inputFieldNamae.$valid:表单是否通过验证,true:通过</span>
<span style="font-size:10px;"> D:formName.inputFieldName.$invalid</span>
<span style="font-size:10px;"> </span>
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 20.8800010681152px;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 20.8800010681152px;"><span style="font-size: 13.9200000762939px;"><span style="font-family: 'Microsoft Yahei'; font-size: 15px; line-height: 22.5px; background-color: rgb(255, 255, 163);">最后两个属性在用于DOM元素的显示或隐藏时是特别有用</span> </span></span></span>
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 20.8800010681152px;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 20.8800010681152px;"><span style="font-size: 13.9200000762939px;"><span style="font-family: 'Microsoft Yahei'; font-size: 15px; line-height: 22.5px; background-color: rgb(255, 255, 163);"> </span></span></span></span>
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 20.8800010681152px;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 20.8800010681152px;"><span style="font-size: 13.9200000762939px;"><span style="font-family: 'Microsoft Yahei'; font-size: 15px; line-height: 22.5px; background-color: rgb(255, 255, 163);"> </span></span></span></span>
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 20.8800010681152px;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 20.8800010681152px;"><span style="font-family: 'Microsoft Yahei'; line-height: 22.5px; background-color: rgb(255, 255, 255);"><span style="font-size:18px;">错误信息</span></span></span></span>
<span style="font-family:Microsoft Yahei;font-size:10px;"><span style="line-height: 22.5px; background-color: rgb(255, 255, 255);">$error:$error对象中保存着没有验证的验证器名称及对应的错误信息</span></span>
<span style="font-family:Microsoft Yahei;font-size:10px;"><span style="line-height: 22.5px; background-color: rgb(255, 255, 255);">$dirty:可以知道用户是否和控件进行过交互</span></span>
<span style="font-family:Microsoft Yahei;font-size:10px;"><span style="line-height: 22.5px; background-color: rgb(255, 255, 255);">$valid:</span></span><span style="line-height: 22.5px; font-family: 'Microsoft Yahei'; font-size: 10px; background-color: rgb(255, 255, 255);">当前控件中是否有错误信息,当有错误时值为false</span>
<span style="font-family:Microsoft Yahei;font-size:10px;"><span style="line-height: 22.5px; background-color: rgb(255, 255, 255);">$invalid:可以知道当前空间中是否存在至少一个错误,它的值和$valid相反</span></span>
<span style="font-family:Microsoft Yahei;font-size:10px;"><span style="line-height: 22.5px; background-color: rgb(255, 255, 255);"></span></span><pre name="code" class="html"><form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate> <p>用户名:<br> <input type="text" name="user" ng-model="user" required> <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> <span ng-show="myForm.user.$error.required">用户名是必须的。</span> </span> </p> <p>邮箱:<br> <input type="email" name="email" ng-model="email" required> <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid"> <span ng-show="myForm.email.$error.required">邮箱是必须的。</span> <span ng-show="myForm.email.$error.email">非法的邮箱地址。</span> </span> </p> <p> <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid"> </p> </form>
4000
相关文章推荐
- AngularJS基础教程之简单介绍
- AngularJS中处理多个promise的方式
- angularJS 中$attrs方法使用指南
- AngularJS实现textarea记录只能输入规定数量的字符并显示
- 深入浅析AngularJS和DataModel
- 简述AngularJS相关的一些编程思想
- 不能不知道的10个angularjs英文学习网站
- AngularJS中的$watch(),$digest()和$apply()区分
- AngularJS的一些基本样式初窥
- 简单讲解AngularJS的Routing路由的定义与使用
- 创建你的第一个AngularJS应用的方法
- 详解AngularJS中的作用域
- Angular发布1.5正式版,专注于向Angular 2的过渡
- 简介AngularJS的视图功能应用
- AngularJS语法详解
- AngularJS 2.0新特性有哪些
- AngualrJS中的Directive制作一个菜单
- 在AngularJS框架中处理数据建模的方式解析
- angularJS与bootstrap结合实现动态加载弹出提示内容
- AngularJS实现全选反选功能