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

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

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

评论

3 楼 lims 2008-08-08  

kuangbaoxu 写道

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

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

丫的，我已经做出通用表单了，你再搞一个通用表单验证，这IT界呀，不好混了

2 楼 JerrySun 2008-08-08  

楼上的，你这叫通用吗！要是改天老板要求改一下字段，一大堆东西要改，而已如果说要移植数据库，你能担保SQL语句通用吗！！

1 楼 achun 2008-05-24  

<p>呵呵楼主的方法不错.<br/>我的项目里面也有这样的方案.<br/>由于进度问题,后台的验证搞定了.<br/>前台只是做了准备工作,代码还没有写.<br/>不过我比你的做法更极端.<br/>我直接把验证的规则写到了数据库的表定义里.给出一个user表的例子</p>
<pre name='code' class='sql'>CREATE TABLE `user` (                                                                                                      
          `id` int(11) NOT NULL auto_increment,                                                                                    
          `u_name` varchar(24) character set ascii NOT NULL COMMENT '{"name":"用户名","tolower":true,"alnum":true,"minlen":4}', 
          `nicheng` varchar(32) NOT NULL COMMENT '{"name":"昵称","nochar":" "}',                                                 
          `u_pass` varchar(32) character set ascii NOT NULL COMMENT '{"name":"密码","tomd5":true}',                              
          `mu_name` varchar(32) NOT NULL COMMENT '{"name":"密保"}',                                                              
          `mu_pass` varchar(32) character set ascii NOT NULL COMMENT '{"name":"密保答案","tomd5":true}',                       
          `gender` int(1) default '2' COMMENT '{"name":"性别","enmu":[0,1,2]}',                                                  
          `card` varchar(24) default NULL COMMENT '{"name":"身份证","idcard":true}',                                            
          `username` varchar(16) default NULL COMMENT '{"name":"真实姓名"}',                                                   
          `email` varchar(32) default '' COMMENT '{"name":"绑定邮箱","email":true}',                                           
          `qq` varchar(24) default NULL COMMENT '{"name":"QQ"}',                                                                   
          `msn` varchar(32) default NULL COMMENT '{"name":"MSN","email":true}',                                                    
          `img` varchar(50) default NULL COMMENT '{"name":"头像","img":true}',                                                   
          `signed` text COMMENT '{"name":"签名"}',                                                                               
          `birt` date default NULL COMMENT '{"name":"签名"}',                                                                    
          `u_time` timestamp NOT NULL default CURRENT_TIMESTAMP COMMENT '{"name":"申请日期","noinput":true}',                  
          `anmin` int(11) default '0' COMMENT '{"name":"权限","noinput":true}',                                                  
          `money` int(11) default '0' COMMENT '{"name":"积分","noinput":true}',                                                  
          `rat` int(11) default '1' COMMENT '{"name":"等级","noinput":true}',                                                    
          `exp` int(11) default '0' COMMENT '{"name":"经验","noinput":true}',                                                    
          `hb` int(11) default '0' COMMENT '{"name":"货币","noinput":true}',                                                     
          PRIMARY KEY  (`id`),                                                                                                     
          UNIQUE KEY `u_name_Index` (`u_name`)                                                                                     
        ) ENGINE=MyISAM AUTO_INCREMENT=36 DEFAULT CHARSET=utf8                                                                     
</pre>
 
<p>可以看到我直接把规则用json的形式写到了comment里.然后做一个小工具把这个信息根据应用的需求生成符合的结构,</p>
<p><strong>做成相应的前台js文件,和后台对应的配置文件.当然具体的验证规则要手工写了.</strong></p>
<p>虽然有一些细节的问题还要处理,但是都能解决的.</p>
<p>我计划的是基于这种方法,制作一个工具,来更好的实现和管理验证规则,管理字段之间的关系.现在还没有足够的时间.目的当然是通过这种方案,较系统的解决验证规则的问题.</p>
<p>当然对于不同的数据库,实现可能有所不同,例如上面的是MySQL的语法,由于MySQL不支持domain功能,如果换了支持domain功能的数据库的话,实现方法就可能有所不同了,</p>
<p>同样的道理,对于外键也是这样.</p>
<p>当然验证规则的定义是否写到comment里,根据数据库的不同是可以商榷的.</p>