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