通用化Web表单验证方式的改进方案,JavaScript

本文是“表单验证方式的通用化”的续篇。

在上文的表单验证解决方案中，有这样几个问题：
1。页面中存在自定义标签，这通不过W3C验证。
2。自定义标签不能写在Struts标签中，造成此解决方案在Struts工程中不适用。
3。验证的方式和页面内容混合在一起，没有分开。
4。原反馈信息span的id必须符合一定规范，这是额外的负担。

为了解决这些问题，我采取了如下步骤：
1。建立一种数据结构，让它容纳文本框id，反馈span的id，验证正则表达式，是否必须输入等四个信息。这样页面就不会混杂自定义标签，w3c验证和struts标签不支持的问题就解决了。
2。建立一个包含多个这种数据结构的数组，其中元素与要验证的文本域一一对应。此数组在需要验证时建立。这里虽然要多些一些JS代码，但验证信息更集中更容易修改了。
3。需要验证时取得数组元素，挨个验证即可，需要的信息都可以从数组元素中取得。整个过程可以库化通用化，页面不需要写验证。

如此做完后，我认为原先的问题基本得到解决了。下面请看具体代码：

1。页面代码。

<tbody>

<tr>

<td>

<input type="text"

name="name"

onfocus="this.style.backgroundColor='#e6e6e6'"

onblur="this.style.backgroundColor='#ffffff'"/>

<span id="nameMsg" class="feedbackHide">用户名必须输入两到三位汉字</span>

</td>

</tr>

<tr>

<td>

<input type="text"

name="title"

onfocus="this.style.backgroundColor='#e6e6e6'"

onblur="this.style.backgroundColor='#ffffff'" />

<span id="titleMsg" class="feedbackHide">员工职位必须是二到五位汉字</span>

</td>

</tr>

<tr>

<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>

<input type="password"

name="pswd"

onfocus="this.style.backgroundColor='#e6e6e6'"

onblur="this.style.backgroundColor='#ffffff'" />

<span id="pswdMsg" class="feedbackHide">员工密码必须是英语或数字</span>

</td>

</tr>

<tr>

<td>

<input type="text"

name="email"

onfocus="this.style.backgroundColor='#e6e6e6'"

onblur="this.style.backgroundColor='#ffffff'" />

<span id="emailMsg" class="feedbackHide">输入必须符合邮件地址格式，如XX@XXX.XX</span>

</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</form>

2。验证时创建数组的函数，注意其与页面元素的对应关系。

<!--

/**

* 取得需要验证的文本框控件数组

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。创建验证数据结构的函数

/**

* 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。验证函数

/**

* 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。验证效果

以上，欢迎提出宝贵意见，在此感谢对前两篇拙文提出宝贵建议的同仁。

代码下载：
http://www.blogjava.net/Files/sitinspring/JsFormChecker20080521125711.rar