一、Web前端表单校验的必要性
Web前端表单校验对于提高Web安全性的意义并不是很大,因为攻击者可以有多种手段绕过前端页面将请求数据发往Web服务器,比如根据HTTP协议规范来仿造一段HTTP请求报文,然后与Web应用服务器建立Socket链接,把报文发往Web服务器
因此,Web前端数据校验的意义在于改善用户体验 ,可实时知道哪些数据是不合法的,这样也能减轻服务器的压力
二、AngularJS表单校验模式
Angular框架会自动为<form>标签和其他表单标签如<input>标记一些CSS样式
--------------------------------------------------------------------------------------------------------------------
<div>
<form name="user">
<input type="text"
ng-model
="user.uname"/>
</form>
</div>
--------------------------------------------------------------------------------------------------------------------
以上代码,在浏览器中,使用开发者工具查看后会发现添加了CSS样式
--------------------------------------------------------------------------------------------------------------------
<form name="user" class="
ng-pristine ng-valid
">
<input
ng-model
="user.uname"
class="
ng-pristine ng-untouched ng-valid ng-empty
" type="text">
</form>
--------------------------------------------------------------------------------------------------------------------
对于这些CSS样式,AngularJS在作用域中会维护一个状态属性与之对应,这些状态属性是AngularJS框架维护的,我们只需要关注这些状态的值即可知道表单输入数据是否合法
CSS样式
|
状态属性
|
描述
|
ng-valid
|
$valid
|
表单输入合法
|
ng-invalid
|
$invalid
|
表单输入不合法
|
ng-pristine
|
$pristine
|
表单元素未被使用
|
ng-dirty
|
$dirty
|
表单元素被使用
|
ng-touched
|
$touched
|
元素获取焦点
|
ng-untouched
|
$untouched
|
元素失去焦点
|
ng-empty
|
$empty
|
元素内容为空
|
AngularJS会根据填写的数据正确与否,自动的为对应状态设置为false或true,并对表单元素添加CSS样式,例如:当数据不合法时,AngularJS会将
$invalid
设置为true并在对应的表单元素上添加CSS样式
ng-invalid
可以利用校验的状态值进行应用
--------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html
ng-app
>
<head>
<meta charset="utf-8">
<title>angularjs</title>
<script type="text/javascript" src="angular-1.5.5/angular.min.js"></script>
</head>
<body>
<div>
<form name="user">
<input type="email" name="email"
ng-model
="email"
required
/>
<span
ng-show
="user.email.
$invalid
">邮箱格式不正确</span>
</form>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------
常用的AngularJS表单校验相关的属性和指令:
1.必填项:
requied
<input type="text"
required
/>
2.最小长度:
ng-minlength
="{number}"
<input type="text"
ng-minlength
="5">
3.最大长度:
ng-maxlength
="{number}"
<input type="text"
ng-maxlength
="5">
4.模式匹配:ng-pattern="/PATTERN/"
<input type="text"
ng-pattern
="[a-zA-Z]"/>
5.电子邮箱:type="email"
<input
type
="email" name="email"
ng-model
="user.email"/>
6.数字:type="number"
<input
type
="number" name="age"
ng-model
="user.age"/>
7.URL:type="url"
<input
type
="url" name="homepage"
ng-model
="user.url"/>
在同一个表单元素中可以同时添加多项校验, 当输入不合法时,如果需要得知不满足哪个校验条件时,可以使用AngularJS框架中和表单相关的
$error
对象的属性进行判断。当表单数据不满足某个校验条件时
$error
对象与之对应的属性(requied、maxlength、minlength等)会被置为true
--------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>angularjs</title>
<script type="text/javascript" src="angular-1.5.5/angular.min.js"></script>
<style type="text/css">
input.ng-invalid{
border:#f00 1px solid;
}
</style>
</head>
<body>
<div>
<form name="user">
<div>
<label>Email:</label>
<input type="
email
" name="email"
ng-minlength
="10"
ng-maxlength
="20"
ng-model
="email"
required
/>
<span
ng-show
="user.email.
$error
.
required
">内容不能为空</span>
<span
ng-show
="user.email.
$error
.
minlength
">长度不能小于10</span>
<span
ng-show
="user.email.
$error
.
maxlength
">长度不能大于20</span>
<span
ng-show
="user.email.
$error
.
email
">不符合Email格式</span>
</div>
</form>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------
注意:这里的user.email.
$error
.
required
是指name属性为user的form表单中的name为email的表单元素中的校验对象$error中required的校验结果
三、ngMessages模块
1.
ngMessages
模块是AngularJS1.3版本之后增加的表单验证相关的模块,主要作用是对提示信息展示功能进行增强
2.
ngMessages
模块的全部内容定义在一个单独的angular-messages.js文件中,需要引入该文件
3.
ngMessages
作为一个单独的模块 ,在声明自定义模块时需要添加
ngMessges
模块依赖
4.
ngMessages
模块提供了
ng-messages
指令和
ng-message
指令
ng-messages
指令用于定义一组表单验证不合法的提示信息,该指令实际上也需要使用
$error
对象;
ng-message
指令用于定义具体某一条表单输入不合法输入时的提示信息
5.当表单数据输入不合法时,
ngMessages
模块会从组中按照从上到下的顺序显示第一条匹配的提示信息
--------------------------------------------------------------------------------------------------------------------
<html ng-app="formModule">
<head>
<meta charset="utf-8">
<title>angularjs</title>
<script type="text/javascript" src="angular-1.5.5/angular.min.js"></script>
<script type="text/javascript" src="angular-1.5.5/angular-messages.min.js"</script>
</head>
<body>
<form name="user">
<label>姓名:</label>
<input type="text" name="name"
ng-model
="name"
required
/>
<div
ng-messages
="user.name.
$error
">
<div
ng-message
="
required
">姓名不能为空</div>
</div>
<label>Email:</label>
<input type="
email
" name="email"
ng-model
="email"
required
/>
<div
ng-messages
="user.email.
$error
">
<div
ng-message
="
required
">邮件不能为空</div>
<div
ng-message
="
email
">邮件地址不合法</div>
</div>
<label>用户留言:</label>
<textarea type="text" name="message"
ng-model
="message"
ng-minlength
="10"
ng-maxlength
="20"
required
></textarea>
<div
ng-messages
="user.message.
$error
">
<div
ng-message
="required">留言不能为空</div>
<div
ng-message
="minlength">留言信息长度不能小于10</div>
<div
ng-message
="maxlength">留言信息长度不能超过20</div>
</div>
</form>
<script type="text/javascript">
angular.
module
("formModule",["
ngMessages
"]);
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------
6.
ngMessages
模块支持错误信息复用,可以把公共的提示信息写在一个单独的error.html文件中,然后再使用
ng-messages-include
指令引入
----------------------------------------------------error.html----------------------------------------------------
<div
ng-message
="
required
">用户留言不能为空</div>
<div
ng-message
="
minlength
">留言信息长度不能少于10个字符</div>
<div
ng-message
="
maxlength
">留言信息长度不能多于100个字符</div>
--------------------------------------------------------------------------------------------------------------------
<div
ng-messages
="exampleForm.userMessages.
$error
"
ng-messages-include
="errors.html">
</div>
--------------------------------------------------------------------------------------------------------------------