这次,学习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)的更多相关文章

  1. 表单验证<AngularJs>

    常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" requir ...

  2. 【转载】表单验证<AngularJs>

    原文地址:http://www.cnblogs.com/rohelm/archive/2014/10/19/4033513.html 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要 ...

  3. ng1.3+表单验证<AngularJs>

    前一篇文章说过,ng1.3+以后对于表单验证有了优化,它不再需要一个详细的表达式状态创建元素显示或隐藏. 例如:我们在ng1.3之前的版本都需要如下写法: <div class="er ...

  4. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  5. 【AngularJS学习笔记】AngularJS表单验证

    AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty   表单有填写记录 3.$v ...

  6. angular.js表单验证

    表单验证<AngularJs> 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type=& ...

  7. 走进AngularJs 表单及表单验证

    年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...

  8. AngularJS表单验证实现方法详解

    本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识,希望通过本文的分享,对大家学习AngularJS有所帮助. 1.常规表单验证: 2.AngularJs中提供的表单验证实例. 实 ...

  9. angularjs的表单验证

    angularjs内置了常用的表单验证指令,比如min,require等.下面是演示: <!DOCTYPE html> <html> <head> <meta ...

随机推荐

  1. Java集合之TreeMap源码分析

    一.概述 TreeMap是基于红黑树实现的.由于TreeMap实现了java.util.sortMap接口,集合中的映射关系是具有一定顺序的,该映射根据其键的自然顺序进行排序或者根据创建映射时提供的C ...

  2. Kotlin入门(17)等式判断的情况

    话说等式可是编程语言最基本的表达式之一,不管哪种高级语言,无一例外都采用双等号“==”判断两个变量是否相等:就算是复杂的对象,在Java中也可通过equals函数判断两个实例是否相等.按理说这些能够满 ...

  3. List基础操作

    /** * List基础操作 * Created by zhen on 2018/11/14. */ object ListDemo { def main(args: Array[String]) { ...

  4. asp.net webapi 自定义身份验证

    /// <summary> /// 验证 /// </summary> /// Account API账号 /// TimeStamp 请求时间 /// Sign 所有请求参数 ...

  5. Fragment分解使用

    Fragment碎片:作为Activity的一部分,不能单独使用: 1. Fragment特点: (1)一个Fragment可以在多个Activity中重用: (2)一个Activity内部可以嵌入多 ...

  6. 路由交换04-----STP

    路由交换-----STP STP协议(生成树协议)逻辑上断开环路,防止二层网络的广播风暴的产生. 为什么需要STP协议? 假设有这样一个拓扑: 现在PC1ping网关192.168.1.3,而这个网关 ...

  7. Linux结构目录

    linux结构目录 Linux中有一句话叫做:一切皆文件. 下面来了解一下这些文件. 首先看一下Linux根目录下结构: bin:存放二进制可执行文件,一般常用命令都存放在这里. boot:存放系统启 ...

  8. MATLAB插 值 法

    MATLAB插  值  法 作者:凯鲁嘎吉 - 博客园http://www.cnblogs.com/kailugaji/ 一.实验目的 二.实验原理 三.实验程序 四.实验内容 五.解答 1. 程序 ...

  9. 在pycharm中每次运行代码不使用console而使用run

    问题:在pycharm中点击run运行程序,发现没有打开run窗口,而是打开的Python console窗口. 解决方法:打开菜单栏run->edit configurations,把下图中的 ...

  10. Python3编写网络爬虫12-数据存储方式五-非关系型数据库存储

    非关系型数据库存储 NoSQL 全称 Not Only SQL 意为非SQL 泛指非关系型数据库.基于键值对 不需要经过SQL层解析 数据之间没有耦合性 性能非常高. 非关系型数据库可细分如下: 键值 ...