表单验证(AngularJs)
这次,学习angularjs的表单的验证,angularjs提供上表几种状态验证:
状态 | 描述 |
$invalid | 未通过验证 |
$valid | 经过验证 |
$pristine | 未修改过 |
$dirty | 修改 |
$error | 错误 |
另外,AngularJS内置的验证器:
验证器 | 描述 |
required | 必需的 |
ng-required | 基于控制器布尔条件标记输入字段为必需 |
ng-minlength | 最小长度 |
ng-maxlength | 最大长度 |
ng-pattern | 指定的正则表达式模式进行检查 |
type=”email” | 电子邮件验证 |
type=”number” | 数字验证 |
type=”date” | 如果浏览器支持,显示一个HTML日期选择器。否则,默认为一个文本输入 |
type=”url” | 验证URL文本输入 |
下面Insus.NET分别举个例子进行实践与说明:
第一种情形,文本框必须填写,还要求字符串的最小长度和最大长度。
第二种情形,必填字段,使用type=number来限制输入字符为数字。
第三种情形,必填字段,验证用户输入日期。
第四种情形,字段域验证用户输入的邮箱地址格式是否正确
第五种情形,对文本框限制只能输入数字,而且有数值范围,最小值为7,最大值为109:
第六种情形,验证用户输入网址格式字符串
第七种情形,使用pattern正则来验证用户输入的数据,下面是只能输入英文字母大小写。
实时操作演示:
<form name="form1" ng-app="CustomValidationApp" ng-controller="cvController" novalidate>
<p>
<label>Item</label>
<input type="text" name="Text" ng-model="Text" required ng-minlength=4 ng-maxlength=13 />
<div class="error" ng-show="form1.Text.$dirty && form1.Text.$invalid">
<small class="error" ng-show="form1.Text.$error.required">
Text请求值。
</small>
<small class="error" ng-show="form1.Text.$error.minlength">
Text最小长度为4个字符。
</small>
<small class="error" ng-show="form1.Text.$error.maxlength">
Text最大长度为13个字符。
</small>
</div>
</p>
<p>
<label>Number</label>
<input type="number" name="Number" ng-model="Number" required />
<div class="error" ng-show="form1.Number.$dirty && form1.Number.$invalid">
<small class="error" ng-show="form1.Number.$error.required">
Number请求值。
</small>
<small class="error" ng-show="form1.Number.$error.number">
Number必须为数字。
</small>
</div>
</p>
<p>
<label>Date</label>
<input type="date" name="Date" ng-model="Date" required placeholder="yyyy-MM-dd" />
<div class="error" ng-show="form1.Date.$dirty && form1.Date.$invalid">
<small class="error" ng-show="form1.Date.$error.required">
Date请求值。
</small>
<small class="error" ng-show="form1.Date.$error.date">
Date必须为日期。
</small>
</div>
</p>
<p>
<label>Email</label>
<input type="email" name="email" ng-model="email" required />
<div class="error" ng-show="form1.email.$dirty && form1.email.$invalid">
<small class="error" ng-show="form1.email.$error.required">
email请求值。
</small>
<small class="error" ng-show="form1.email.$error.email">
email必须为邮箱地址。
</small>
</div>
</p>
<p>
<label>Range</label>
<input type="number" name="Range" ng-model="Range" min="7" max="109" required />
<div class="error" ng-show="form1.Range.$dirty && form1.Range.$invalid">
<small class="error" ng-show="form1.Range.$error.required">
Range请求值。
</small>
<small class="error" ng-show="form1.Range.$error.number">
Range必须为数字。
</small>
<small class="error" ng-show="form1.Range.$error.min">
Range最小值为7。
</small>
<small class="error" ng-show="form1.Range.$error.max">
Range最大值为109。
</small>
</div>
</p>
<p>
<label>url</label>
<input type="url" name="url" ng-model="url" required />
<div class="error" ng-show="form1.url.$dirty && form1.url.$invalid">
<small class="error" ng-show="form1.url.$error.required">
url请求值。
</small>
<small class="error" ng-show="form1.url.$error.url">
url必须为url格式。
</small>
</div>
</p>
<p>
<label>pattern</label>
<input type="text" name="pattern" ng-model="pattern" ng-pattern="/^[a-zA-Z]*$/" required />
<div class="error" ng-show="form1.pattern.$dirty && form1.pattern.$invalid">
<small class="error" ng-show="form1.pattern.$error.required">
pattern请求值。
</small>
<small class="error" ng-show="form1.pattern.$error.pattern">
pattern必须大小写字符。
</small>
</div>
</p>
</form>
Html Source Code
var cvApp = angular.module('CustomValidationApp', []);
cvApp.controller('cvController', function ($scope, $http) {
});
JS Code
表单验证(AngularJs)的更多相关文章
- 表单验证<AngularJs>
常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" requir ...
- 【转载】表单验证<AngularJs>
原文地址:http://www.cnblogs.com/rohelm/archive/2014/10/19/4033513.html 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要 ...
- ng1.3+表单验证<AngularJs>
前一篇文章说过,ng1.3+以后对于表单验证有了优化,它不再需要一个详细的表达式状态创建元素显示或隐藏. 例如:我们在ng1.3之前的版本都需要如下写法: <div class="er ...
- AngularJS中的表单验证
AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...
- 【AngularJS学习笔记】AngularJS表单验证
AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty 表单有填写记录 3.$v ...
- angular.js表单验证
表单验证<AngularJs> 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type=& ...
- 走进AngularJs 表单及表单验证
年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...
- AngularJS表单验证实现方法详解
本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识,希望通过本文的分享,对大家学习AngularJS有所帮助. 1.常规表单验证: 2.AngularJs中提供的表单验证实例. 实 ...
- angularjs的表单验证
angularjs内置了常用的表单验证指令,比如min,require等.下面是演示: <!DOCTYPE html> <html> <head> <meta ...
随机推荐
- Java集合之TreeMap源码分析
一.概述 TreeMap是基于红黑树实现的.由于TreeMap实现了java.util.sortMap接口,集合中的映射关系是具有一定顺序的,该映射根据其键的自然顺序进行排序或者根据创建映射时提供的C ...
- Kotlin入门(17)等式判断的情况
话说等式可是编程语言最基本的表达式之一,不管哪种高级语言,无一例外都采用双等号“==”判断两个变量是否相等:就算是复杂的对象,在Java中也可通过equals函数判断两个实例是否相等.按理说这些能够满 ...
- List基础操作
/** * List基础操作 * Created by zhen on 2018/11/14. */ object ListDemo { def main(args: Array[String]) { ...
- asp.net webapi 自定义身份验证
/// <summary> /// 验证 /// </summary> /// Account API账号 /// TimeStamp 请求时间 /// Sign 所有请求参数 ...
- Fragment分解使用
Fragment碎片:作为Activity的一部分,不能单独使用: 1. Fragment特点: (1)一个Fragment可以在多个Activity中重用: (2)一个Activity内部可以嵌入多 ...
- 路由交换04-----STP
路由交换-----STP STP协议(生成树协议)逻辑上断开环路,防止二层网络的广播风暴的产生. 为什么需要STP协议? 假设有这样一个拓扑: 现在PC1ping网关192.168.1.3,而这个网关 ...
- Linux结构目录
linux结构目录 Linux中有一句话叫做:一切皆文件. 下面来了解一下这些文件. 首先看一下Linux根目录下结构: bin:存放二进制可执行文件,一般常用命令都存放在这里. boot:存放系统启 ...
- MATLAB插 值 法
MATLAB插 值 法 作者:凯鲁嘎吉 - 博客园http://www.cnblogs.com/kailugaji/ 一.实验目的 二.实验原理 三.实验程序 四.实验内容 五.解答 1. 程序 ...
- 在pycharm中每次运行代码不使用console而使用run
问题:在pycharm中点击run运行程序,发现没有打开run窗口,而是打开的Python console窗口. 解决方法:打开菜单栏run->edit configurations,把下图中的 ...
- Python3编写网络爬虫12-数据存储方式五-非关系型数据库存储
非关系型数据库存储 NoSQL 全称 Not Only SQL 意为非SQL 泛指非关系型数据库.基于键值对 不需要经过SQL层解析 数据之间没有耦合性 性能非常高. 非关系型数据库可细分如下: 键值 ...