Teambiz中前臺表單驗證組件FormChecker
作者：何楊
撰寫日期：2012年2月27日
版本：1.00
更新日期：
第一部分：功能說明
對前臺頁面的表單組件（對于所有用.value能取到值的組件都適用）提供正則表達式驗證功能。
第二部分：核心組件
| 名稱 | 路徑 | 說明 |
| CheckItem | teambiz\WebRoot\page\js\formchecker.js | 這個類表示一個頁面檢查項，參數有表單組件id，當不合法時提示的文字，驗證表單組件內容的正則表達式和表征組件是否必填字段。 在頁面中增添驗證項時常會遇到這個類。 |
| FormChecker | teambiz\WebRoot\page\js\formchecker.js | 這個類表示一個前臺組件正則表達式驗證器。內含一個數組，以容納多個驗證項（CheckItem） |
| addCheckItem | teambiz\WebRoot\page\js\formchecker.js | 向FormChecker的數組中增添一個驗證項。 在頁面中增添驗證項時常會遇到這個類。 |
| checkTextBox | teambiz\WebRoot\page\js\formchecker.js | 對一個checkItem進行檢查，如果它是必填組件，使用正則表達式驗證它，并返回驗證的結果；如果它不是必填組件，且沒有輸入內容的話，返回真，否則依然按照正則表單時來驗證它。 |
| isValid | teambiz\WebRoot\page\js\formchecker.js | 對FormChecker的數組進行循環并逐個使用checkTextBox函數進行檢查，當所有的檢查項都符合驗證條件后返回真；如果有一個檢查項不符合條件，使用alert顯示提示文字并將焦點至于該組件上。 用戶在提交表單前應該調用這個函數得到表單的驗證結果。 |
第三部分：CheckItem和FormChecker兩個類的代碼
以下代碼請參見teambiz\WebRoot\page\js\ formchecker.js中同名函數。
/*************************
*
* Class:CheckItem
* 2009.08.23
**************************/
//-- Contructor
function CheckItem(textboxName,msg,validChar,isRequired){
this.textboxName=textboxName;
this.msg=msg;
this.validChar=validChar;
this.isRequired=isRequired;
}
/*************************
*
* Class:FormChecker
* 2009.08.23
**************************/
//-- Contructor
function FormChecker(){
this.checkItemArray=new Array;
}
//-- Add a check Item to array
FormChecker.prototype.addCheckItem=function(textboxName,msg,validChar,isRequired){
var checkItem=new CheckItem(textboxName,msg,validChar,isRequired);
this.checkItemArray[this.checkItemArray.length]=checkItem;
};
//-- Check text field in the form
FormChecker.prototype.checkTextBox=function(checkItem){
var validChar=checkItem.validChar;
var isRequired=checkItem.isRequired;
var inputValue=$(checkItem.textboxName).value;
if(isRequired!="true" && inputValue.length<1){
return true;
}
else{
var regexStr="^"+validChar+"$";
var regex=new RegExp(regexStr);
return regex.test(inputValue);
}
};
//-- judge the validation of a form
FormChecker.prototype.isValid=function(){
for(var i=0;i<this.checkItemArray.length;i++){
var toBeCheckedObj=this.checkItemArray[i];
var checkResult=this.checkTextBox(toBeCheckedObj);
if(checkResult==true){
continue;
}
else{
alert(toBeCheckedObj.msg);
$(toBeCheckedObj.textboxName).focus();
return false;
}
}
return true;
};
第四部分：使用CheckItem和FormChecker進行驗證的代碼
以下代碼請參考：teambiz\WebRoot\page\jsp\user\register\javascript.jsp
1.初始化FormChecker及添加驗證項目
formChecker=new FormChecker();
formChecker.addCheckItem("userName","請輸入二到五位漢字的用戶名","[\\u4E00-\\u9FA5]{2,5}","true");
formChecker.addCheckItem("userPswd","請輸5位以上,最長20位的字母或數字組成的密碼","(\\w){5,20}","true");
formChecker.addCheckItem("userPswd2","請輸5位以上,最長20位的字母或數字組成的密碼","(\\w){5,20}","true");
formChecker.addCheckItem("email","請輸入您的電子郵件","\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\.\\w+([-.]\\w+)*","true");
2.得到表單的驗證結果
function getCheckResult(){
// 進行頁面輸入檢查
if(formChecker.isValid()==false){
return false;
}
var userPswd=$("userPswd").value;
var userPswd2=$("userPswd2").value;
if(userPswd!=userPswd2){
$("userPswd2").focus();
alert("前后兩次密碼必須一致.");
return false;
}
return true;
}
以上粗體部分就是得到FormChecker的驗證結果。由于FormChecker只能對單個組件的文本內容進行正則表達式校驗，無法對對多個組件進行比較，因此如果實際需要其它的驗證項，可以在getCheckResult函數中進行添加。
3.注冊按鈕點擊時間后的響應函數：
$("registerBtn").onclick=function(){
if(getCheckResult()==true){
submitForm();
}
};
第五部分：使用步驟
| 步驟 | 說明 | 參照 |
| 載入這批函數 | 在teambiz中，這一載入一般放在style.css中。 | <script src="page/js/formchecker.js" type="text/javascript"></script> |
| 在window_onload函數中初始化表單驗證器并增添檢查項。 | | formChecker=new FormChecker(); formChecker.addCheckItem("userName","請輸入二到五位漢字的用戶名","[\\u4E00-\\u9FA5]{2,5}","true"); formChecker.addCheckItem("userPswd","請輸5位以上,最長20位的字母或數字組成的密碼","(\\w){5,20}","true"); formChecker.addCheckItem("userPswd2","請輸5位以上,最長20位的字母或數字組成的密碼","(\\w){5,20}","true"); formChecker.addCheckItem("email","請輸入您的電子郵件","\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\.\\w+([-.]\\w+)*","true"); |
| 使用FormChecker的isValid函數來得到驗證結果。 | | function getCheckResult(){ // 進行頁面輸入檢查 if(formChecker.isValid()==false){ return false; } …… return true; } |
| 注冊按鈕點擊時間后的響應函數 | | $("registerBtn").onclick=function(){ if(getCheckResult()==true){ submitForm(); } }; |
第六部分：小結
進行表單元素驗證是程序員不得不做卻又較為乏味的工作之一，FormChecker類能有助于減輕他們的負擔，從而使得用正則表達式驗證文本內容的工作變得簡單，程序員只需要在正則表達式的編寫上下些功夫或者求助于網絡。
FormChecker的不足之處是驗證模式單一，驗證邏輯比較簡單，但對于驗證，似乎也沒有多少共性的需求了，如果有希望大家能賜教。