文档章节

AngularJS表单验证 学习中。。

rikkilovelife
 rikkilovelife
发布于 2014/06/12 10:36
字数 1213
阅读 90
收藏 0

AngularJS表单验证

10 Mar 2014

近期项目需求,很多地方需要进行表单验证。对比传统使用jQuery方法来验证,AngularJS的数据绑定的优势瞬间体现出来。

在AngularJS中已经有很多可供利用的表单验证directive.我们首先来看一看最常用的一些,然后开始尝试写一些自定义的验证方法。

<form name="form">   <label name="email">Your email</label>   <input type="email" name="email" ng-model="email" placeholder="Email Address" /> </form>

我们可以不费太多力气的使用AngulaJS完成客户端表单验证。现实开发中我们不能完全依靠客户端表单验证来保障web应用的安全,但是这样做的好处是可以提供表单状态的即时反馈。

为了使用表单验证,我们首先必须保证form元素拥有关联的 name 属性。

所有的表单项都可以做一些简单的验证,例如最小长度,最大长度等等。这些都可以通过原生的HTML5属性来实现。

在实际开发中建议始终添加 novalidate 标记到form标签上,这样可以保证在表单不合法的情况下阻止浏览器继续提交数据。

下面我们来看一下我们可以在 input 表单域上添加的验证选项:

Required 必填项

为了验证某个表单项是否为空,只需要在表单域上添加一个HTML5标签:required

<input type="text" required />

Minimum length 最小长度

为了验证某个表单项的数据至少有 {number} 个字符,只需要在表单域上加入ng-minlength="{number}" directive:

<input type="text" ng-minlength=5 />

Maximum length 最大长度

为了验证某个表单项等于或者少于一定数目字符串,添加 ng-maxlength="{number}" directive:

<input type="text" ng-maxlength=20 />

Matches a pattern 正则匹配

为了确保某个表单匹配某个正则表达式,使用如下AngularJS directive: ng-pattern="/PATTERN/" :

<input type="text" ng-pattern="/a-zA-Z/" />

Email地址

为了验证表单项为email地址,只需设置 input 的type为 email 即可,例如:

<input type="email" name="email" ng-model="user.email" />

Number 数字

为了验证某个表单项为数字,设置 input 的type为 number :

<input type="number" name="age" ng-model="user.age" />

Url地址

为了验证表单内容为合法url地址,设置 input type 为 url:

<input type="url" name="homepage" ng-model="user.weibo_url" />

自定义验证

AngularJS同样也允许我们使用directive来添加自定义的验证方法。例如,我们需要验证username表单项的数据在数据库的唯一性。为了达成这个目的,我们需要完成一个directibe用于在表单数据发生变化时发起一次ajax请求。

var app = angular.module('validationExample', []); app.directive('ensureUnique', ['$http', function($http) {     return {         require: 'ngModel',         link: function(scope, ele, attrs, c) {             scope.$watch(attrs.ngModel, function() {                 $http({                     method: 'POST',                     url: '/api/check/' + attrs.ensureUnique,                     data: {'field': attrs.ensureUnique}                 }).success(function(data, status, headers, cfg) {                     c.$setValidity('unique', data.isUnique);                 }).error(function(data, status, headers, cfg) {                     c.$setValidity('unique', false);                 });             });         }     } }]);

控制表单变量

AngularJS通过DOM元素上设置一个表单,从而使我们可以很容易的获取到当前$scope 对象的属性。这样可以使我们即时的得到表单的最新数据。这里可供我们利用的属性如下:

注意这些属性是通过如下格式获取的:

formName.inputFieldName.property

Unmodified form 未改变表单

返回一个布尔值,告诉我们用户是否修改了表单。

formName.inputFieldName.$pristine

Modified form 修改过的表单

当且仅当用户实际修改过表单数据时返回一个布尔值。这个属性无视表单是否合法:

formName.inputFieldName.$dirty

Valid form 合法表单

返回表单是否合法的布尔值。如果表单当前合法,则返回true:

formName.inputFieldName.$valid

Invalid form 非法表单

返回表单是否合法的布尔值。如果表单不合法,则返回true:

formName.inputFieldName.$invalid

最后两个属性在控制DOM元素隐藏或显示时特别有用。同时为某个特定表单设置class时也很方便。

Errors 错误

另外一个非常有用的属性是 $error 对象。这个对象包含了某个特定表单所有的验证信息以及表单是否合法。可以通过如下语法获取到这些属性:

formName.inputFieldName.$error

如果某个验证失败,则这个属性返回true,相反如果这个属性为false,则代表验证通过。

添加样式

AngularJS在处理表单时会自动为当前状态添加某些特定类名称。这些class属性和我们检查属性时的名称也很类似。

包括如下class:

.ng-pristine {} .ng-dirty {} .ng-valid {} .ng-invalid {}

以上属性分别对应所检查表单项检查结果。

如果某个表单域非法,ng-invalid就会添加到对应的元素上。可以为元素添加如下样式:

input.ng-invalid {border: 1px solid red;} input.ng-valid {border: 1px solid green;}


© 著作权归作者所有

共有 人打赏支持
上一篇: event.keycode值大全
下一篇: 转 js 与或非
rikkilovelife
粉丝 1
博文 23
码字总数 11842
作品 0
杭州
网页/平面设计
私信 提问
如何优雅的使用 Angular 表单验证

随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模块中使用最新的 An...

why520crazy
01/15
0
0
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
0
0
AngularJS 的表单验证

今天我们将来看看Angular如何帮助做表单验证. 我们将讨论更多使用angular进行有关表单操作的东西(就像我们另外的一篇文章: 提交Ajax表单:AngularJS的方式). 不过不用担心,那篇文章不一定要...

oschina
2014/06/22
67.4K
7
开源中国的 AngularJS 优秀文章汇总

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

oschina
2014/08/24
5.7K
13
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26

没有更多内容

加载失败,请刷新页面

加载更多

20个使用 Java CompletableFuture的例子

https://colobu.com/2018/03/12/20-Examples-of-Using-Java%E2%80%99s-CompletableFuture/

lemos
32分钟前
1
0
Apache 流框架 Flink,Spark Streaming,Storm对比分析

1.Flink架构及特性分析 Flink是个相当早的项目,开始于2008年,但只在最近才得到注意。Flink是原生的流处理系统,提供high level的API。Flink也提供 API来像Spark一样进行批处理,但两者处理...

hblt-j
36分钟前
1
0
什么是公网IP、内网IP和NAT转换?

搞网络通信应用开发的程序员,可能会经常听到外网IP(即互联网IP地址)和内网IP(即局域网IP地址),但他们的区别是什么? 1、引言 搞网络通信应用开发的程序员,可能会经常听到外网IP(即互联网I...

linuxprobe16
42分钟前
1
0
Spring Cloud搭建微服务架构----流量回放

前言 系统微服务化后,传统的自测/测试方式都变得比较困难: 依赖的服务可能不稳定。 服务无法提供期望的响应数据。 缺少场景构造标准。 随着整体业务越来越复杂,微服务依赖的越来越多,测试...

春哥大魔王的博客
今天
4
0
记一次springboot模块配置问题导致读取Apollo配置中心配置文件始终错误的问题

现在正在做的一个项目采用的是微服务,主框架是spring cloud,配置中心用的是携程的Apollo。 项目下有多个服务,在测试服务器上启动用户服务的时候发现在eureka中心另一个服务被启动了,尝试...

zcqshine
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部