jsvalidation客戶端JavaScript驗(yàn)證框架使用手冊(cè)
jsvalidation.pdf jsvalidationdemo.zip
1. JSValidation是什么？
官方地址：http://cosoft.org.cn/projects/jsvalidation（目前好像打不開）
JSValidation是客戶端表單驗(yàn)證框架，用在BS系統(tǒng)中，或者簡(jiǎn)單的網(wǎng)頁(yè)系統(tǒng)中。表單驗(yàn)證在這些開發(fā)中很常見：新用戶注冊(cè)，需要校驗(yàn)?zāi)承┳侄危挥脩舻顷懀枰ｒ?yàn)；等等。在這之前，頁(yè)面開發(fā)者（JavaScript開發(fā)者）需要編寫大量的JavaScript來(lái)與表單對(duì)象交互，并進(jìn)行校驗(yàn)。常見的校驗(yàn)如不能為空，必須滿足長(zhǎng)度要求，必須為數(shù)字，必須為Email等等。根據(jù)一般的經(jīng)驗(yàn)，如果表單中需要校驗(yàn)的域個(gè)數(shù)超過(guò)10個(gè)，開發(fā)過(guò)程就顯得枯燥無(wú)味——多段重復(fù)的代碼不斷重復(fù)，如果要求跨瀏覽器，更多的考慮因素使人頭疼不已。往往這個(gè)頁(yè)面的驗(yàn)證還不能用于那個(gè)驗(yàn)證……雖然邏輯基本相同；但是在大多數(shù)情況下，出于種種原因，開發(fā)者寧愿（或者沒(méi)辦法）重新編寫另一個(gè)頁(yè)面的JavaScript代碼。
JSValidation致力于改善這一過(guò)程。它將常見的校驗(yàn)（目前支持13種）封裝起來(lái)，并創(chuàng)造性的采用xml來(lái)存貯表單驗(yàn)證信息，使得表單的驗(yàn)證成為整個(gè)項(xiàng)目中最不重要的環(huán)節(jié)，開發(fā)者只需要定義幾個(gè)xml標(biāo)記，就可以創(chuàng)建出復(fù)雜的驗(yàn)證策略，而不用編寫一行JavaScript代碼。由于采用xml集中管理表單驗(yàn)證，使得表單驗(yàn)證在整個(gè)系統(tǒng)中的耦合度大大降低，并且易維護(hù)性大大提高。開發(fā)者更多的精力可以投入到業(yè)務(wù)相關(guān)的代碼中。
恰恰相反，JSValidation內(nèi)部結(jié)構(gòu)雖然不太簡(jiǎn)單（對(duì)用戶而言），但是調(diào)用方式卻極其簡(jiǎn)單，配置好環(huán)境后，只需要在需要驗(yàn)證的表單的HTML標(biāo)記中加上onsubmit="return doValidate('formId')"即可。這并沒(méi)有改變開發(fā)者的習(xí)慣。
更為明顯的優(yōu)勢(shì)是，JSValidation具備跨瀏覽器的能力。在目前的測(cè)試環(huán)境下，支持IE5及以上版本，Mozilla系列和支持DOM2模型的其他瀏覽器。你不用再考慮在多瀏覽器下如何兼容，JSValidation幫你做到了這些。
2. JSValidation能做什么，不能做什么？
2.1.1. JSValidation能夠校驗(yàn)表單
在系統(tǒng)復(fù)雜，表單復(fù)雜的場(chǎng)景下，JSValidation的優(yōu)勢(shì)更加突出。JSValidation目前能夠完成客戶端的13種驗(yàn)證如下：
取值非空
必須為整數(shù)
必須為雙精度數(shù)
必須為普通英文字符（字母，數(shù)字，下劃線）
必須為中文字符
最小長(zhǎng)度
最大長(zhǎng)度
是否為Email格式
是否為日期格式（yyyy-mm-dd）
自定義的正則表達(dá)式
整數(shù)范圍（大于某數(shù)小于某數(shù)）
雙精度數(shù)范圍
必須與某個(gè)域的值相同
所有這些驗(yàn)證都在客戶端完成。如果還有在此之外的驗(yàn)證需求，請(qǐng)告訴我們，我們會(huì)跟據(jù)需求程度開發(fā)出新的驗(yàn)證模型。
2.1.2. JSValidation不能做的：
跨頁(yè)面的驗(yàn)證。例如，A頁(yè)面輸入值，必須滿足B頁(yè)面中某一個(gè)值的條件，或者更多的頁(yè)面。這個(gè)需求需要用戶的反饋。如果在現(xiàn)實(shí)開發(fā)中這種需求很普遍，我們會(huì)考慮開發(fā)。目前的替代方式是，將A頁(yè)面需要驗(yàn)證的值POST到B頁(yè)面的一個(gè)Hidden Field，然后再使用已有的驗(yàn)證方式。
與服務(wù)器交互驗(yàn)證。最常見的是輸入用戶名密碼后登錄。限于它的表示范圍，JSValidation不能完成這個(gè)工作。
其他沒(méi)有提到的，很希望你能告訴我們。
3. 什么情況下，我應(yīng)該使用JSValidation？
如果沒(méi)有現(xiàn)成的驗(yàn)證參考，就使用它吧。
有很多的開發(fā)工具、開發(fā)框架（模型）都已經(jīng)提供了驗(yàn)證支持，如ASP.NET，Struts。但是還有更多的Framework沒(méi)有提供支持，例如我們使用的Velocity（也許它不能稱為框架），以及其他的ASP, PHP, Pure JSP, CGI等等。也許沒(méi)有成熟的框架使用。如果沒(méi)有，JSValidation也許能夠幫助你減輕客戶端校驗(yàn)編程的壓力，讓你有更多的精力投入對(duì)業(yè)務(wù)的關(guān)注中。
另外，如果你的系統(tǒng)很小，或者系統(tǒng)中需要校驗(yàn)的很少——例如只有一個(gè)登陸的用戶名、密碼需要校驗(yàn)，那么基于性能考慮，我們不建議你采用JSValidation。JSValidation庫(kù)文件達(dá)到22KB，加上驗(yàn)證文件，也許要在你的頁(yè)面上加載額外的26K+才能運(yùn)行。而相同的功能，自己按照常規(guī)方式寫也不過(guò)幾行。
當(dāng)然，如果你現(xiàn)有的開發(fā)過(guò)程中已經(jīng)有了自己的模型，很熟悉也很牢固了，盡可能采用你自己的方式吧。
4. 在項(xiàng)目中快速使用jsvalidation
4.1.1. 獲取jsvalidation
官方下載：http://cosoft.org.cn/projects/jsvalidation（目前好像打不開）
本地下載：http://www.aygfsteel.com/Files/sxyx2008/jsvalidation.zip
4.1.2. 配置環(huán)境
首先將validation-framework.js和validation-config.xml復(fù)制到項(xiàng)目的某一目錄下
例如：
1) 打開validation-framework.js，找到var ValidationRoot = ""; 將這行代碼更改為var ValidationRoot = "js/"; (就是validation-config.xml文件的位置)。
2) 在你需要進(jìn)行校驗(yàn)的頁(yè)面中，加入jsvalidation的引用：
<script language="javascript" src="js/validation-framework.js"></script>
3) 在該頁(yè)面需要驗(yàn)證的表單Form標(biāo)記中，加入on submit="return doValidate('formId')"。其中formID是該Form的id。
4) 完成。
4.1.3. 編寫validation-config.xml
validation-config.xml是集中管理表單的存放點(diǎn)，也是JSValidation處理驗(yàn)證條件的地方。
1) - 文件格式
validation-config.xml是標(biāo)準(zhǔn)文本格式。你可以以任何文本編輯器來(lái)編輯它。在正式校驗(yàn)之前，請(qǐng)確保你的xml文件能夠正常顯示在瀏覽器中。
2) - 基本結(jié)構(gòu)
|
<validation-config> 每個(gè)validation-config.xml都有一個(gè)validation-config根節(jié)點(diǎn)
<form ...> 可以進(jìn)行一個(gè)或者多個(gè)form的校驗(yàn)
<field ...> 每個(gè)form有一個(gè)或者多個(gè)需要驗(yàn)證的表單域
<depend ... /> 每個(gè)域需要驗(yàn)證的條件可以有一個(gè)或者多個(gè)
|
3) 節(jié)點(diǎn)說(shuō)明
validation-config: 根節(jié)點(diǎn)
屬性：lang: 所用的語(yǔ)言，可以是"auto", "zh-cn"（簡(jiǎn)體中文）或者"en-us"（英文）。默認(rèn)為auto，可選。
子節(jié)點(diǎn)：form, 一個(gè)或多個(gè)
form: 虛擬表單，通過(guò)id映射網(wǎng)頁(yè)中的表單
屬性：id: 映射網(wǎng)頁(yè)表單中的id，通過(guò)這個(gè)id，使得jsvalidation與實(shí)際網(wǎng)頁(yè)表單相關(guān)聯(lián)。必須
show-error: 顯示錯(cuò)誤提示信息的方式。可以是alert（將會(huì)顯示對(duì)話框）或者一個(gè)div的id（將會(huì)在這個(gè)div中顯示錯(cuò)誤消息）必須
onfail: 當(dāng)校驗(yàn)失敗時(shí)，運(yùn)行的自定義JS函數(shù)。可選（該版本尚未實(shí)現(xiàn)）
子節(jié)點(diǎn)：field，一個(gè)或者多個(gè)
field: 虛擬表單域，通過(guò)name映射表單中的實(shí)際域
屬性：name: 表單中的域的名稱，例如input name="abc"，此處則對(duì)應(yīng)abc。 必須
display-name: 表單的顯示名稱。當(dāng)校驗(yàn)失敗時(shí)，會(huì)顯示這個(gè)屬性。必須
onfaile: 與form中的onfail一樣。尚未實(shí)現(xiàn)。可選
子節(jié)點(diǎn)：depend，一個(gè)或多個(gè)
depend: 校驗(yàn)條件
屬性：name: 校驗(yàn)條件的名稱，必須為下面指定的13中名稱之一，大小寫敏感。必須。
param0-param4，5個(gè)參數(shù)，根據(jù)name不同，各有不同取值。
一個(gè)范例：
|
<!--校驗(yàn)用戶注冊(cè)-->
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE validation-config SYSTEM "validation-config.dtd">
<validation-config lang="auto">
<form show-error="errorDiv" id="registerForm" show-type="first">
<field display-name="用戶名" name="username">
<depend name="required"/>
<depend name="commonChar"/>
<depend name="minLength" param0="6"/>
<depend name="maxLength" param0="8"/>
</field>
<field display-name="密碼" name="password">
<depend name="required"/>
<depend name="commonChar"/>
<depend name="minLength" param0="6"/>
<depend name="maxLength" param0="8"/>
</field>
<field display-name="重復(fù)密碼" name="repassword">
<depend name="required"/>
<depend name="commonChar"/>
<depend name="minLength" param0="6"/>
<depend name="maxLength" param0="8"/>
<depend name="equalsField" param0="password"/>
</field>
<field display-name="年齡" name="age">
<depend name="required"/>
<depend name="integerRange" param0="18" param1="60"/>
</field>
<field display-name="年出生年月" name="birthday">
<depend name="required"/>
<depend name="date" param0="yyyy-mm-dd"/>
</field>
<field display-name="電子郵件" name="emails">
<depend name="required"/>
<depend name="email"/>
</field>
</form>
</validation-config>
|
4.1.4. 校驗(yàn)表單
編寫完validation-config.xml后，就可以按照上面的部署方法進(jìn)行部署。
5. JSValidation支持的13種驗(yàn)證
|
name
|
描述
|
參數(shù)含義
|
|
required
|
必須，代表這個(gè)域不能為空
|
無(wú)參數(shù)
|
|
integer:
|
沒(méi)有或者必須為整數(shù)
|
無(wú)參數(shù)
|
|
double:
|
允許為空或者必須為double數(shù)
|
無(wú)參數(shù)
|
|
commonChar
|
普通英文字符：字母數(shù)字和下劃線
|
無(wú)參數(shù)
|
|
chineseChar:
|
中文字符
|
無(wú)參數(shù)
|
|
minLength:
|
最小長(zhǎng)度，
|
param0為最小長(zhǎng)度數(shù)值
|
|
maxLength:
|
最大長(zhǎng)度，
|
param0為最大長(zhǎng)度數(shù)值
|
|
email:
|
必須為Email格式
|
無(wú)參數(shù)
|
|
date:
|
必須為日期格式，
|
param0必須為yyyy-mm-dd,或者三個(gè)占位符的任意排列順序。連接字符任意如dd/mm/yyyy
|
|
mask:
|
允許自定義正則表達(dá)式來(lái)進(jìn)行校驗(yàn)
|
param0為表達(dá)式字符串
|
|
integerRange:
|
整數(shù)范圍必須在參數(shù)0和參數(shù)1之間。
|
param0和param1必須能被轉(zhuǎn)化成整數(shù)
|
|
doubleRange:
|
double數(shù)的范圍必須在參數(shù)0和參數(shù)1之間
|
參數(shù)0和參數(shù)1必須能被轉(zhuǎn)化成Float。
|
|
equalsField:
|
必須與某一個(gè)域的值相等
|
param0：同一個(gè)表單中域的名稱。例如用來(lái)校驗(yàn)密碼
|
6. 完整的例子（實(shí)現(xiàn)用戶注冊(cè)驗(yàn)證）
6.1.1. 項(xiàng)目目錄
結(jié)合以上目錄注意修改文件中21行路徑
在jsp頁(yè)面中引入文件
6.1.2. 注冊(cè)頁(yè)面內(nèi)容
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用戶注冊(cè)</title>
<script type="text/javascript" src="js/validation-framework.js"></script>
</head>
<body>
<div id="errorDiv"></div>
<form action="http://www.google.cn" method="post" id="registerForm" onsubmit="return doValidate('registerForm')">
<table align="center" style="border: 1px solid; border-collapse: collapse;" width="300" height="300" border="1" bordercolor="blue">
<caption>用戶注冊(cè)</caption>
<tr>
<td align="right">用戶名:</td>
<td><input id="username" type="text"/></td>
</tr>
<tr>
<td align="right">密碼:</td>
<td><input id="password" type="password"/></td>
</tr>
<tr>
<td align="right">重復(fù)密碼:</td>
<td><input id="repassword" type="password"/></td>
</tr>
<tr>
<td align="right">年齡:</td>
<td><input id="age" type="text"/></td>
</tr>
<tr>
<td align="right">出生年月:</td>
<td><input id="birthday" type="text"/></td>
</tr>
<tr>
<td align="right">email:</td>
<td><input id="emails" type="text"/></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="注冊(cè)"/>
<input type="reset" value="取消"/>
</td>
</tr>
</table>
</form>
</body>
</html>
|
6.1.3. 配置validation-config.xml文件
（針對(duì)上述用戶注冊(cè)表單信息validation-config.xml文件配置信息如下）
|
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE validation-config SYSTEM "validation-config.dtd">
<validation-config lang="auto">
<form show-error="alert" id="registerForm" show-type="all">
<field display-name="用戶名" name="username">
<depend name="required"/>
<depend name="commonChar"/>
<depend name="minLength" param0="6"/>
<depend name="maxLength" param0="8"/>
</field>
<field display-name="密碼" name="password">
<depend name="required"/>
<depend name="commonChar"/>
<depend name="minLength" param0="6"/>
<depend name="maxLength" param0="8"/>
</field>
<field display-name="重復(fù)密碼" name="repassword">
<depend name="required"/>
<depend name="commonChar"/>
<depend name="minLength" param0="6"/>
<depend name="maxLength" param0="8"/>
<depend name="equalsField" param0="password"/>
</field>
<field display-name="年齡" name="age">
<depend name="required"/>
<depend name="integerRange" param0="18" param1="60"/>
</field>
<field display-name="年出生年月" name="birthday">
<depend name="required"/>
<depend name="date" param0="yyyy-mm-dd"/>
</field>
<field display-name="電子郵件" name="emails">
<depend name="required"/>
<depend name="email"/>
</field>
</form>
</validation-config>
|
對(duì)于里面具體的配置信息我不在闡述，如有不懂的大家可以查詢jsvalidation的文檔，這里提醒大家在項(xiàng)目中長(zhǎng)疏忽的地方及應(yīng)注意的事項(xiàng)
i. 整個(gè)項(xiàng)目文件的編碼問(wèn)題：
最好統(tǒng)一編碼為utf-8，這里需要注意的是文件默認(rèn)的編碼格式是gbk建議大家統(tǒng)一更換為utf-8否則里面的中文字符亂碼達(dá)不到預(yù)期的效果，我在初次使用的時(shí)候就疏忽了這個(gè)地方，結(jié)果浪費(fèi)了好多時(shí)間
ii. 注意路徑問(wèn)題，這里告訴大家一個(gè)快捷方法：在jsp中引用文件時(shí)，選中該文件然后拖到頁(yè)面中松開鼠標(biāo)，大家會(huì)發(fā)現(xiàn)奇跡出現(xiàn)了，這個(gè)文件已經(jīng)被引用進(jìn)來(lái)了，而且保證不會(huì)出錯(cuò)
這塊應(yīng)注意兩處的路徑問(wèn)題：
(a)jsp頁(yè)面中引用文件的路徑
(b) 文件中的路徑問(wèn)題：
其中var ValidationRoot的值可直接拷貝在jsp中引用文件路徑的前半部分
如：
|
<script type="text/javascript" src="js/validation-framework.js"></script>
|
即你只需拷貝“js/”部分去填充var ValidationRoot的值
iii. 驗(yàn)證email類型表單屬性：
在驗(yàn)證email類型表單屬性時(shí)，你必須同時(shí)指定
<depend name="required"/>
<depend name="email"/>
否則在驗(yàn)證email時(shí)將不起作用
iv. validation-config.xml文件中<form> 標(biāo)簽屬性配置
1) show-error
show-error屬性用來(lái)確定以何種方式展現(xiàn)錯(cuò)誤信息,其取值有alert/errorDiv, alert就不用解釋了, errorDiv就是以div的形式提示錯(cuò)誤信息,這就需要你在jsp頁(yè)面中定義一個(gè)div其id應(yīng)為errorDiv,
如：<div id="errorDiv"></div>,最終錯(cuò)誤信息將會(huì)顯示在該div中
2) id
id對(duì)應(yīng)jsp頁(yè)面中form的id屬性
3) show-type
show-type屬性用來(lái)確定錯(cuò)誤信息顯示的條目,其取值為all/first
all一次性顯示所有的錯(cuò)誤信息（從第一個(gè)不合法的表單屬性一次性校驗(yàn)）
first每次只顯示一條（從第一個(gè)不合法的表單屬性逐個(gè)校驗(yàn)）
7. jsvalidation類說(shuō)明圖
下載電子版文檔 jsvalidationdemo.zip