表单数据的校验对于提高WEB安全性意义不大,因为服务器接收到的请求不一定来自我们的前端页面,有可能来自别的站点,黑客可以自己做一个表单,把数据提交到我们的服务器(即跨站伪造请求),这样就绕过了前端页面的校验。如果对HTTP协议比较熟,甚至还可以在程序中手动构造一段HTTP请求发到服务器,所以服务器端的数据校验绝对是必不可少的。

WEB前端数据校验的意义在于改善用户体验,用户不用等到將数据提交到服务器后才知道哪些数据是不合法的。

使用AngularJs对表单元素进行校验是相当方便的,我们来看一下可以在input元素上使用的所有校验选项。

1.必填项

验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可:

`<input type="text" required />

2. 最小长度

验证表单输入的文本长度是否大于某个最小值,在输入字段上使用AngularJS指令ng-minleng= “{number}”:

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

3. 最大长度

验证表单输入的文本长度是否小于或等于某个最大值,在输入字段上使用AngularJS指令ng-maxlength=”{number}”:

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

4. 模式匹配

使用ng-pattern=”/PATTERN/”来确保输入能够匹配指定的正则表达式:

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

5. 电子邮件

验证输入内容是否是电子邮件,只要像下面这样将input的类型设置为email即可:

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

6. 数字

验证输入内容是否是数字,将input的类型设置为number:

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

7. URL

验证输入内容是否是URL,将input的类型设置为 url:

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

我们看一下具体的一个案例代码:

<!DOCTYPE html>
<html ng-app="loginMod">
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
<script type="text/javascript" src="angular-1.3.0.14/angular-messages.js"></script>
<title>tutorial06_1</title>
<style>
input.ng-invalid {
border: 1px solid red;
}
input.ng-valid {
border: 1px solid green;
}
</style>
</head>
<body>
<div>
<form name="loginForm" novalidate ng-submit="login()" ng-controller="LoginController">
<div style="width:280px;float:left">
<label>用户名:</label>
<input type="text" placeholder="请输入用户名" name="uname" ng-model="uname" ng-minlength=
3 ng-maxlength=10 required />
</div>
<div class="error" ng-messages="loginForm.uname.$error" style="color:red;">
<div ng-message="required">用户名不能为空</div>
<div ng-message="minlength">用户名长度至少为3</div>
<div ng-message="maxlength">用户名长度不能超过10</div>
</div>
<br/><br/>
<button type="submit">提交</button>
</form>
</div>
<script>
var loginMod = angular.module('loginMod', ['ngMessages']);
loginMod.controller("LoginController",function($scope,$log){
$scope.login = function()
{
$log.info("点击了按钮");
}
});
</script>
</body>
</html>

表单校验作为AngularJs的一个ngMessages模块封装在angular-messages.js文件中,我们必须引入它:

<script type="text/javascript" src="angular-1.3.0.14/angular-messages.js">

除此之外还要告诉AngularJs將ngMessages作为应用程序的依赖模块引入,像下面这个样子:

var loginMod = angular.module('loginMod', ['ngMessages']);

required指定文本框为必输项,ng-minlength指定最小长度,ng-maxlength指定最大长度,校验工作是AngularJs内部完成的,我们只需要定义不满足条件时的提示信息:

<div class="error" ng-messages="loginForm.uname.$error" style="color:red;">
<div ng-message="required">用户名不能为空</div>
<div ng-message="minlength">用户名长度至少为3</div>
<div ng-message="maxlength">用户名长度不能超过10</div>
</div>

最后我们在浏览器中看一下效果:

我们还可以把提示信息写在一个单独的errors.html文件中:

<div ng-message="required">用户名不能为空</div>
<div ng-message="minlength">用户名长度至少为3</div>
<div ng-message="maxlength">用户名长度不能超过10</div>

然后在页面中使用ng-messages-include属性引入这些信息:

 <div class="error" ng-messages="loginForm.uname.$error"
style="color:red;" ng-messages-include="errors/errors.html">
</div>

源码地址:https://github.com/rongbo-j/angularjs

AngularJs轻松入门(六)表单校验的更多相关文章

  1. AngularJS 1.2.x 学习笔记(表单校验篇)

    https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...

  2. angularJs表单校验(超级详细!!!)

    html代码 <!DOCTYPE html> <html ng-app="angularFormCheckModule"> <head> < ...

  3. ng-messages AngularJs 表单校验方式

    最新研究了一下表单校验,直接上代码. <!DOCTYPE html><html ng-app='app'><head> <meta charset=" ...

  4. AngularJs轻松入门

    AngularJs轻松入门系列博文:http://blog.csdn.net/column/details/angular.html AngularJs轻松入门(一)创建第一个应用 AngularJs ...

  5. easyui 进阶之表单校验、自定义校验

    前言 easyui是一种基于jQuery的用户界面插件集合,它为创建现代化,互动,JavaScript应用程序,提供必要的功能,完美支持HTML5网页的完整框架,节省网页开发的时间和规模.非常的简单易 ...

  6. JavaWeb -- Struts1 使用示例: 表单校验 防表单重复提交 表单数据封装到实体

    1. struts 工作流程图 超链接 2. 入门案例 struts入门案例: 1.写一个注册页面,把请求交给 struts处理 <form action="${pageContext ...

  7. Vue Element-ui表单校验规则,你掌握了哪些?

    1.前言   Element-ui表单校验规则,使得错误提示可以直接在form-item下面显示,无需弹出框,因此还是很好用的.   我在做了登录页面的表单校验后,一度以为我已经很了解表单的校验规则. ...

  8. Spring MVC 文件上传、Restful、表单校验框架

    目录 文件上传 Restful Restful 简介 Rest 行为常用约定方式 Restful开发入门 表单校验框架 表单校验框架介绍 快速入门 多规则校验 嵌套校验 分组校验 综合案例 实用校验范 ...

  9. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

随机推荐

  1. android 极细线

    最后找到一个还算好用的方法:伪类 + transform 原理是把原先元素的 border 去掉,然后利用:before或者:after重做 border ,并 transform 的 scale 缩 ...

  2. linux 内存不足时候 应该及时回收page cache

    另一起问题是24G内存的系统,空闲内存已经不到50M 1. 确认该系统的版本是64位 # uname -a Linux gxgd-nms-app 2.6.18-194.el5xen #1 SMP Tu ...

  3. sublime配置python运行环境

    1.sublime下载与插件管理 1.1 下载 官网地址:https://www.sublimetext.com/3 1.2 安装Package Control管理插件 使用ctrl + ` (感叹后 ...

  4. CSS3的常用属性(二)

    边框 边框圆角 border-radius: 100px 每个角可以设置两个值,x和y 补充: 可分别设置长,短半径,以“/”进行分隔,遵循顺时针的顺序,“/”之前为横轴半径,“/”之后为纵轴半径,如 ...

  5. 使用xshell连接本地虚拟机中的Linux问题

    xshell 连接虚拟机中Linux报错: Could not connect to '192.168.8.120' (port 22):Connection failed. 原因:虚拟机中Linux ...

  6. swift语言点评十六-Initialization && Deinitialization

    initial value:必须初始化.不影响观察者 Classes and structures must set all of their stored properties to an appr ...

  7. css实现步骤条

    实现效果 html <ul class="steps"> <li class="active">申请完成</li> < ...

  8. kali(Ubuntu)右键添加idle打开方式

    IDLE可以说是Unix平台下Python的第一个集成开发环境(IDE) 命名行输入idle看idle是否已安装,没有则先安装 安装idle:apt-get install idle 安装完成后,命名 ...

  9. Vue2.0父子组件间事件派发机制

    从vue1.x过来的都知道,在vue2.0中,父子组件间事件通信的$dispatch和$broadcase被移除了.官方考虑是基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会 ...

  10. 紫书 例题 10-2 UVa 12169 (暴力枚举)

    就是暴力枚举a, b然后和题目给的数据比较就ok了. 刘汝佳这道题的讲解有点迷,书上讲有x1和a可以算出x2, 但是很明显x2 = (a * x1 +b) 没有b怎么算x2?然后我就思考了很久,最后去 ...