彻底弄懂angularJS表单验证
常用的表单验证指令 (基本概念)
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" />
我们使用了 ng-show指令, color:red 在邮件是 $dirty 或 $invalid 才显示:
属性 | 描述 |
---|---|
$dirty | 表单有填写记录 |
$valid | 字段内容合法的 |
$invalid | 字段内容是非法的 |
$pristine | 表单没有填写记录 |
示例(以邮箱为例+正则表达式 引入angular+bootstrap)
ng正则表达式写法:
ng-pattern=" /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/" //邮箱验证
<body ng-Controller="MyController"> //ng-app标在html标签上
<div class="col-md-6">
<form role="form" name="myForm" ng-submit="submitForm(myForm.$valid)" class="form-horizontal" novalidate>
<div class="form-group has-feedback">
<div class="col-md-4">
<label for="email"> 电子邮件</label>
</div>
<div class="col-md-6">
<input type="email" id="email" name="email" ng-minlength="5" ng-maxlength="30" ng-pattern=" /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/" ng-model="user.email" required class="form-control" />
<span class="glyphicon glyphicon-ok form-control-feedback"
ng-show="myForm.email.$dirty && myForm.email.$valid"></span> </div>
<div class="col-md-2">
<span style="color:red" class=""
ng-show="myForm.email.$dirty && myForm.email.$invalid">邮箱格式错误!</span>
</div>
</div>
<div class="form-group text-center">
<input class="btn btn-primary btn-lg" ng-disabled="myForm.$invalid" type="submit" value="提交" />
</div>
</form>
</div> <script>
angular.module('myTest', [])
.controller('MyController', function($scope) {
$scope.submitForm = function(isValid) {
if (!isValid) {
alert('验证失败');
}
};
}
);
</script>
</body>
也可以更详尽的支出单个错误:
<div ng-show="myForm.email.$dirty && myForm.email.$error.maxlength" class="alert alert-danger help-block">
邮箱长度不能超过30位
</div>
<div ng-show="myForm.email.$dirty && myForm.email.$error.minlength" class="alert alert-danger help-block">
邮箱长度不能小于5位
</div>
<div ng-show="myForm.email.$dirty && myForm.email.$error.email" class="alert alert-danger help-block">
邮箱格式不正确
</div>
彻底弄懂angularJS表单验证的更多相关文章
- angularjs表单验证checkbox
angularjs中默认有表单验证的支持,见文末的refer 我想要验证至少要选择一个checkbox,否则就不能提交 但是checkbox貌似没有简单的方法,想来想去给出下面的解决方案 valida ...
- 【AngularJS学习笔记】AngularJS表单验证
AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty 表单有填写记录 3.$v ...
- AngularJS表单验证实现方法详解
本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识,希望通过本文的分享,对大家学习AngularJS有所帮助. 1.常规表单验证: 2.AngularJs中提供的表单验证实例. 实 ...
- AngularJs表单验证
常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" requir ...
- [Angularjs]表单验证
写在前面 在开发中提交表单,并对表单的值进行验证是非常常见的操作,angularjs对表单验证提供了非常好的支持. demo 表单 <form name="myform" n ...
- AngularJS表单验证,手动验证或自动验证
AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证. 手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件:1.给form元 ...
- AngularJS 表单验证小结
注:本文所述的表单验证即AngularJS自带的表单验证,无需引入第三方的插件 一.常用的验证特性标签 1.非空 为input加入一个required属性即可,例如: <input type=& ...
- angularjs 表单验证(不完整版)
针对项目实践表单验证总结: angular 的 form表单验证:form内需要novalidate取消默认验证,用ng自己的验证,form的名字是非常必要的 栗子:以注册为栗子,下面是注册的部分: ...
- AngularJS表单验证开发案例
angular支持IE8+浏览器,虽然性能很好,但是目前只适用于手机端项目 知识点:域$scopeAngularJS基础指令指令实现不同的功能学习思路和方法 <link rel="st ...
随机推荐
- 接口&&多态&&构造函数&&关键字
day06 抽象类的局限性(与接口的区别) 抽象类可以定义非抽象方法,避免子类重复实现这些方法,提高代码重用性;接口只能包含抽象方法;jdk1.8之后接口可以包含默认方法. 一个类只能继承一个直接父类 ...
- DTD约束和Schema约束
DTD约束 什么是DTD? DTD(Document Type Definition),文档类型定义,用来约束XML文档.规定XML文档中元素的名称,子元素的名称及顺序,元素的属性等. DTD约束长什 ...
- String为什么要设置成Final类型
---今天面试碰到个这样的问题:String在设计的时候为什么要设计成final的 当时回答的是String功能已经很丰富了,不需要对其进行扩展,所有巴拉巴拉. 现在来正确看看为什么定义成final ...
- git解决本地建立git仓库 连接远程git仓库出现拒绝合并问题
(git解决本地建立git仓库 连接远程git仓库出现拒绝合并问题) 第一步在本地创建仓库 在本地创建一个文件夹,cd 进入创建的文件夹之后 git init 创建仓库 ,ls -a 能够看到 .gi ...
- day54 js基础
目录 一.变量 二.数据类型 1 数值类型(number) 2 字符类型(string) 3 字符类型常用方法 4 布尔值(boolean) 5 null与undefined 6 对象 7 运算符 8 ...
- XSS与CSRF定义
一. CSRF 1. CSRF的基本概念 跨站请求伪造(英语:Cross-site request forgery),也被称为 one-click attack 或者 session riding,通 ...
- celery 基础教程(三):配置
前言 如果你使用默认的加载器,你必须创建 celeryconfig.py 模块并且保证它在python路径中. 一.加载配置方法 1.基础方法 可以设置一些选项来改变 Celery 的工作方式.这 ...
- Python基础最难知识点:正则表达式(使用步骤)
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 正则表达式,简称regex,是文本模式的描述方法.你可以在google上搜 ...
- mysql中常见约束
#常见约束 /* 含义:一种限制,用于限制表中的数据,为了保证表中的数据的准确和可靠性 分类:六大约束 NOT NULL:非空,用于保证该字段的值不能为空 比如姓名.学号等 DEFAULT:默认,用于 ...
- (5)webpack中url-loader的使用
为什么要使用url-loader 在前面已经介绍了css文件可以使用第三方loader去加载. 在一个项目中,也不仅仅只有html,js和css文件,还有图片文件,字体文件等等.当我们给一个css样式 ...