文档章节

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
杭州
网页/平面设计
私信 提问
《AngularJS学习整理》系列分享专栏

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

开元中国2015
11/09
0
0
[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen
05/21
0
0
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2
angular--怎样创建响应式表单?

在angular中,提供了两种创建表单的方式: * 模板驱动型表单(Template Driven Forms) * 响应式表单(Reactive Forms) 在模板驱动型表单中,我们直接通过 ngModel 指令在组件模板中创建 co...

IrisHuang
07/13
0
0
有哪些常见的验证表单方式,他们各自的优缺点是什么?

大家好,我是IT修真院北京总院第24期的学员,一枚正直纯洁善良的web程序员 今天给大家分享一下,修真院官网JS任务10,深度思考中的知识点——谈谈以前端角度出发做好SEO需要考虑什么? 1.背景...

我是一只北极熊啊
2017/11/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

day149-2018-11-16-英语流利阅读-待学习

抖音登陆海外市场,歪果仁作何反应? Lala 2018-11-16 1.今日导读 抖音在国内已经火了有一段时间了,但你知道它已经进军海外,而且火了一把吗?中国版抖音的宣传语是“记录美好生活”,但外国...

飞鱼说编程
12分钟前
1
0
Confluence 6 教程:在 Confluence 中导航

当你对 Confluence 有所了解后,你会发现 Confluence 使用起来非常简单。这个教程主要是针对你使用的 Confluence 界面进行一些说明,同时向你展示在那里可以进行一些通用的任务和操作。 空间...

honeymose
今天
2
0
sed, awk 练习

1. sed打印某行到某行之间的内容 2. sed 转换大小写 将单词首字母转化大写 将所有小写转化大写 3. sed 在某一行最后面添加一个数字 4. 删除某行到最后一行 解析: {:a;N;$!ba;d} :a : 是...

Fc丶
今天
2
0
babel6升级到7,jest-babel报错:Requires Babel "^7.0.0-0", but was loaded with "6.26.3".

自从将前端环境更新到babel7,jest-babel之前是基于babel6的,执行时候就会报:Requires Babel "^7.0.0-0", but was loaded with "6.26.3". 很烦,因为连续帮好几台电脑修复这个问题,所以记...

曾建凯
今天
1
0
探索802.11ax

802.11ax承诺在真实条件下改善峰值性能和最差情况。 如何改善今天的Wi-Fi? 在决定如何改进当前版本以外的Wi-Fi时,802.11ac,IEEE和Wi-Fi联盟调查了Wi-Fi部署和行为,以确定更广泛使用的障碍...

linuxprobe16
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部