本文是“
表單驗(yàn)證方式的通用化”的續(xù)篇。
在上文的表單驗(yàn)證解決方案中，有這樣幾個(gè)問題：
1。頁面中存在自定義標(biāo)簽，這通不過W3C驗(yàn)證。
2。自定義標(biāo)簽不能寫在Struts標(biāo)簽中，造成此解決方案在Struts工程中不適用。
3。驗(yàn)證的方式和頁面內(nèi)容混合在一起，沒有分開。
4。原反饋信息span的id必須符合一定規(guī)范，這是額外的負(fù)擔(dān)。
為了解決這些問題，我采取了如下步驟：
1。建立一種數(shù)據(jù)結(jié)構(gòu)，讓它容納文本框id，反饋span的id，驗(yàn)證正則表達(dá)式，是否必須輸入等四個(gè)信息。這樣頁面就不會(huì)混雜自定義標(biāo)簽，w3c驗(yàn)證和struts標(biāo)簽不支持的問題就解決了。
2。建立一個(gè)包含多個(gè)這種數(shù)據(jù)結(jié)構(gòu)的數(shù)組，其中元素與要驗(yàn)證的文本域一一對應(yīng)。此數(shù)組在需要驗(yàn)證時(shí)建立。這里雖然要多些一些JS代碼，但驗(yàn)證信息更集中更容易修改了。
3。需要驗(yàn)證時(shí)取得數(shù)組元素，挨個(gè)驗(yàn)證即可，需要的信息都可以從數(shù)組元素中取得。整個(gè)過程可以庫化通用化，頁面不需要寫驗(yàn)證。
如此做完后，我認(rèn)為原先的問題基本得到解決了。下面請看具體代碼：
1。頁面代碼。
<!-- 調(diào)用通用驗(yàn)證函數(shù)checkForm -->
<form action="ShowPage" onsubmit="return checkForm(getCheckArray());">
<!-- 內(nèi)置表格開始 -->
<table width=660 align=center border=0>
<tbody>
<tr>
<td width=70>姓名:</td>
<td>
<input type="text"
name="name"
onfocus="this.style.backgroundColor='#e6e6e6'"
onblur="this.style.backgroundColor='#ffffff'"/>
<font color=red> (必填)</font>
<span id="nameMsg" class="feedbackHide">用戶名必須輸入兩到三位漢字</span>
</td>
</tr>
<tr>
<td width=70>職位:</td>
<td>
<input type="text"
name="title"
onfocus="this.style.backgroundColor='#e6e6e6'"
onblur="this.style.backgroundColor='#ffffff'" />
<font color=red> (必填)</font>
<span id="titleMsg" class="feedbackHide">員工職位必須是二到五位漢字</span>
</td>
</tr>
<tr>
<td width=70>年齡:</td>
<td>
<input type="text"
name="age"
onfocus="this.style.backgroundColor='#e6e6e6'"
onblur="this.style.backgroundColor='#ffffff'" />
<span id="ageMsg" class="feedbackHide">員工年齡在20到59之間</span>
</td>
</tr>
<tr>
<td width=70>密碼:</td>
<td>
<input type="password"
name="pswd"
onfocus="this.style.backgroundColor='#e6e6e6'"
onblur="this.style.backgroundColor='#ffffff'" />
<font color=red> (必填)</font>
<span id="pswdMsg" class="feedbackHide">員工密碼必須是英語或數(shù)字</span>
</td>
</tr>
<tr>
<td width=70>郵件:</td>
<td>
<input type="text"
name="email"
onfocus="this.style.backgroundColor='#e6e6e6'"
onblur="this.style.backgroundColor='#ffffff'" />
<font color=red> (必填)</font>
<span id="emailMsg" class="feedbackHide">輸入必須符合郵件地址格式，如XX@XXX.XX</span>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="錄入"/></td>
</tr>
</tbody>
</table>
</form>
<!-- 內(nèi)置表格結(jié)束-->
2。驗(yàn)證時(shí)創(chuàng)建數(shù)組的函數(shù)，注意其與頁面元素的對應(yīng)關(guān)系。
<script LANGUAGE="JavaScript">
<!--
/**//**
* 取得需要驗(yàn)證的文本框控件數(shù)組
*
*/
function getCheckArray()
{
var arr=new Array();
arr[0]=createToBeCheckedObj("name","nameMsg","[\\u4E00-\\u9FA5]{2,3}","true");
arr[1]=createToBeCheckedObj("title","titleMsg","[\\u4E00-\\u9FA5]{2,5}","true");
arr[2]=createToBeCheckedObj("age","ageMsg","[2-5]{1}[0-9]{1}","false");
arr[3]=createToBeCheckedObj("pswd","pswdMsg","\\w+","true");
arr[4]=createToBeCheckedObj("email","emailMsg","\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\.\\w+([-.]\\w+)*","true");
return arr;
}
//-->
</script>
3。創(chuàng)建驗(yàn)證數(shù)據(jù)結(jié)構(gòu)的函數(shù)
/**//**
* Check a object will be checked when sbmit a form
*/
function createToBeCheckedObj(textboxName,msgSpanId,validChar,isRequired){
// Create the object will be checked
var toBeCheckedObj=new Object;
// Set propertied to toBeCheckedObj
toBeCheckedObj.textboxName=textboxName;
toBeCheckedObj.msgSpanId=msgSpanId;
toBeCheckedObj.validChar=validChar;
toBeCheckedObj.isRequired=isRequired;
// create a method of toBeCheckedObj
toBeCheckedObj.showProperties=function(){
alert("TextboxName="+this.textboxName+" MsgSpanId="+this.msgSpanId+" ValidChar="+this.validChar+" IsRequired"+this.isRequired);
}
// return the object will be checked
return toBeCheckedObj;
}
4。驗(yàn)證函數(shù)
/**//**
* Check form
*/
function checkForm(toBeCheckedObjArray){
for(var i=0;i<toBeCheckedObjArray.length;i++){
var toBeCheckedObj=toBeCheckedObjArray[i];
// toBeCheckedObj.showProperties();
var checkResult=checkTextBox(toBeCheckedObj);
if(checkResult){
document.getElementById(toBeCheckedObj.msgSpanId).className="feedbackHide";
}
else{
document.getElementById(toBeCheckedObj.msgSpanId).className="feedbackShow";
document.getElementById(toBeCheckedObj.textboxName).focus();
return false;
}
}
// alert("all passed");
return true;
}
/**//**
* Check text field in the form
*/
function checkTextBox(toBeCheckedObj){
var validChar=toBeCheckedObj.validChar;
var isRequired=toBeCheckedObj.isRequired;
var inputValue=document.getElementById(toBeCheckedObj.textboxName).value;
if(isRequired!="true" && inputValue.length<1){
return true;
}
else{
var regexStr="^"+validChar+"$";
var regex=new RegExp(regexStr);
return regex.test(inputValue);
}
}
5。驗(yàn)證效果
以上，歡迎提出寶貴意見，在此感謝對前兩篇拙文提出寶貴建議的同仁。
代碼下載：
http://www.tkk7.com/Files/sitinspring/JsFormChecker20080521125711.rar