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

在上文的表单验证解决方案中，有这样几个问题：
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 > &nbsp; (必填) </ 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 > &nbsp; (必填) </ 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 > &nbsp; (必填) </ 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 > &nbsp; (必填) </ 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 >
                   <!--  内置表格结束 -->

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);
    }
}

5。验证效果

 

 

 

 

 

 

 

 

 

http://www.blogjava.net/sitinspring/archive/2008/05/21/201893.html