在上文的表单验证解决方案中，有这样几个问题：
1。页面中存在自定义标签，这通不过W3C验证。
2。自定义标签不能写在Struts标签中，造成此解决方案在Struts工程中不适用。
3。验证的方式和页面内容混合在一起，没有分开。
4。原反馈信息span的id必须符合一定规范，这是额外的负担。
为了解决这些问题，我采取了如下步骤：
1。建立一种数据结构，让它容纳文本框id，反馈span的id，验证正则表达式，是否必须输入等四个信息。这样页面就不会混杂自定义标签，w3c验证和struts标签不支持的问题就解决了。
2。建立一个包含多个这种数据结构的数组，其中元素与要验证的文本域一一对应。此数组在需要验证时建立。这里虽然要多些一些JS代码，但验证信息更集中更容易修改了。
3。需要验证时取得数组元素，挨个验证即可，需要的信息都可以从数组元素中取得。整个过程可以库化通用化，页面不需要写验证。
如此做完后，我认为原先的问题基本得到解决了。下面请看具体代码：
1。页面代码。
＜!-- 调用通用验证函数checkForm --＞
＜form action="ShowPage" onsubmit="return checkForm(getCheckArray()); "＞
＜!-- 内置表格开始 --＞
＜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"＞员工密码必须是英语或数字＜/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"＞输入必须符合邮件地址格式，如[email protected]＜/span＞
＜/td＞
＜/tr＞
＜tr＞
＜td＞＜/td＞
＜td＞＜input type="submit" value="录入"/＞＜/td＞
＜/tr＞
＜/tbody＞
＜/table＞
＜/form＞
＜!-- 内置表格结束--＞
2。验证时创建数组的函数，注意其与页面元素的对应关系。
＜script LANGUAGE="JavaScript"＞
＜!--
/**//**
* 取得需要验证的文本框控件数组
*
*/
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);
}
}
最新评论