文档章节

AngularJS表单验证 学习中。。

rikkilovelife
 rikkilovelife
发布于 2014/06/12 10:36
字数 1213
阅读 89
收藏 0
点赞 0
评论 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;}


© 著作权归作者所有

共有 人打赏支持
rikkilovelife
粉丝 1
博文 22
码字总数 11842
作品 0
杭州
网页/平面设计
[Angular Material完全攻略] Day 01 - 开始 & 简介

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

readilen ⋅ 05/21 ⋅ 0

Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区 ⋅ 05/08 ⋅ 0

Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh ⋅ 05/05 ⋅ 0

【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878 ⋅ 05/19 ⋅ 0

[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World

今天我们将开始正式迈入Angular Material的世界,要学习使用Angular Material打造高品质及高质感的网页,当然要从安装Angular Material套件开始,本篇文章就来介绍基本的Angular Material安装...

readilen ⋅ 05/21 ⋅ 0

Angular 6 服务端渲染之 udao 终章

先介绍下小朋友 udao,首先是一个开源项目,代码足够简单,其次是跟随 Angular 大小版本一起成长的项目,会定期更新所有依赖包以及兼容最新版本的写法 Github 地址也贴出来好多次了:github....

orangexc ⋅ 05/10 ⋅ 0

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊?

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊? angular2和现在官网的angular6 就是 angular js 只是版本不同...

Jordan裔 ⋅ 05/19 ⋅ 0

AngularJS 的 Material Design 风格框架 - AngularJS Material

AngularJS Material 是 AngularJS 框架的谷歌 Material Design 标准的实现。AngularJS Material 包含一组丰富的、可重用、经过充分测试并可访问的 UI 组件。 针对 Angular 2 或更高版本的实现...

匿名 ⋅ 05/15 ⋅ 0

Mac环境 部署Node.js环境 安装Angular CLI 解决找不到ng命令的问题

Mac环境 部署Node.js环境 安装Angular CLI 解决找不到ng命令的问题 2018年02月08日 23:34:56 阅读数:207 写这篇博客的原因是本人最近在学习AngularJS 公司环境是Ubuntu 家里环境是macOS 公司...

一真的鱼 ⋅ 05/09 ⋅ 0

【Angular】之Angular环境搭建

前言 小编最近在学习angular的内容,万事开头难,完成了开头也便成功了一半。这句话小编在这次的学习实践之旅中,深有体会,下面小编就来讲一讲,angular环境搭建之旅吧! 一、环境搭建 1.下...

m18633778874 ⋅ 05/08 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Mahout推荐算法API详解

前言 用Mahout来构建推荐系统,是一件既简单又困难的事情。简单是因为Mahout完整地封装了“协同过滤”算法,并实现了并行化,提供非常简单的API接口;困难是因为我们不了解算法细节,很难去根...

xiaomin0322 ⋅ 19分钟前 ⋅ 0

WampServer默认web服务器根目录位置

安装WampServer之后的web服务器根目录默认位置在WampServer安装目录下的www:

临江仙卜算子 ⋅ 21分钟前 ⋅ 0

Redux的一些手法记录

Redux Redux的基本概念见另一篇文。 这里记录一下Redux在项目中的实际操作的手法。 actions 首先定义action.js,actions的type,可以另起一个action-type.js文件。 action-type.js用来存...

LinearLaw ⋅ 22分钟前 ⋅ 0

android 手势检测(左右滑动、上下滑动)

GestureDetector类可以让我们快速的处理手势事件,如点击,滑动等。 使用GestureDetector分三步: 1. 定义GestureDetector类 2. 初始化手势类,同时设置手势监听 3. 将touch事件交给gesture...

王先森oO ⋅ 36分钟前 ⋅ 0

java 方法的执行时间监控 设置超时(Future 接口)

java 方法的执行时间监控 设置超时(Future 接口) import java.util.concurrent.Callable; import java.util.concurrent.ExecutionException; import java.util.concurrent.Executor......

青峰Jun19er ⋅ 41分钟前 ⋅ 0

一名开源小白的Apache成长自述

今天收到了来自Apache Vote我成为Serviceomb项目Committer的邮件,代表自己的贡献得到了充分的肯定;除了感谢团队的给力支持,我更希望将自己的成长经历——如何践行Apache Way的心得介绍给大...

微服务框架 ⋅ 43分钟前 ⋅ 0

vim介绍、颜色显示和移动光标、一般模式下复制、剪切和粘贴

1.vim 是 vi 的升级版 vim 是带有颜色显示的 mini安装的系统,一般都不带有vim [root@aminglinux-128 ~]# yum install -y vim-enhanced已加载插件:fastestmirror, langpacksLoading mir...

oschina130111 ⋅ 43分钟前 ⋅ 0

Deepin 操作系统四面楚歌

作为国内做的最好的 Linux 发行版,源自 Debian sid 的 Deepin 目前正面临重重困境,新版本不断延期,开发人员离职,bug 长期得不到修复,和 Debian/Ubuntu 的兼容性问题也面临越来越严重的挑...

六库科技 ⋅ 43分钟前 ⋅ 0

MyBatis之动态sql

我们需要知道的是,使用mybatis重点是对sql的灵活解析和处理。在原先的UserMappser.xml中,我们这样查询表中满足条件的记录 : 123 <select id="findUserList" parameterType="userQuery...

瑟青豆 ⋅ 44分钟前 ⋅ 0

这届俄罗斯世界杯的冷门那么多怎么办?

最纯粹的世界杯,最神奇的大冷门。 德国0比1被墨西哥摩擦了。 日本历史性的赢了哥伦比亚。 C罗也挑平了西班牙。 梅西被冰岛狮吼吼愣神了。 就连11次进世界杯4强的巴西也被瑞士逼平了。 天台已...

开源中国众包平台 ⋅ 44分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部