春风博客

春天里,百花香...

导航

<2008年5月>
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567

统计

公告

MAIL: junglesong@gmail.com
MSN: junglesong_5@hotmail.com

Locations of visitors to this page

常用链接

留言簿(11)

随笔分类(224)

随笔档案(126)

个人软件下载

我的其它博客

我的邻居们

最新随笔

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜

通用化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/Files/sitinspring/JsFormChecker20080521125711.rar

posted on 2008-05-21 14:09 sitinspring 阅读(3772) 评论(7)  编辑  收藏 所属分类: Web开发JavaScript

评论

# re: 通用化Web表单验证方式的改进方案 2008-05-21 19:01 基金净值

正是我需要的,谢谢!  回复  更多评论   

# re: 通用化Web表单验证方式的改进方案 2008-05-21 19:10 HiMagic!

你可以用google搜一下form通用验证,好像是叫validator什么的,他使用了html tag的扩展属性,应该比你的方案更好。此外,该方案完全丢弃了server端验证。  回复  更多评论   

# re: 通用化Web表单验证方式的改进方案 2008-05-21 20:31 如坐春风

@HiMagic!

谢谢提示,有空我会去看的。 我这个方案也全是Client端的。
  回复  更多评论   

# re: 通用化Web表单验证方式的改进方案 2008-05-23 10:41 大牙

如果你希望使用一个完善的Web页面验证框架,建议还是去google搜索下载“我佛山人”的Validator。现在最新好像是4.0。十分好用,强烈推荐,呵呵~~  回复  更多评论   

# re: 通用化Web表单验证方式的改进方案 2008-05-23 13:17 如坐春风

@大牙

谢谢推荐。
  回复  更多评论   

# re: 通用化Web表单验证方式的改进方案 2008-09-05 13:14 小数

感觉页面上的东西太多了  回复  更多评论   

# re: 通用化Web表单验证方式的改进方案 2008-09-05 21:53 寻道者

@小数

是还有改进的余地。
  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 
sitinspring(http://www.blogjava.net)原创,转载请注明出处.