论坛首页 Web前端技术论坛

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

浏览 2560 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2008-05-23  
验证时创建数组的函数,注意其与页面元素的对应关系。
<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); 
}
}
   发表时间:2008-05-24  

呵呵楼主的方法不错.
我的项目里面也有这样的方案.
由于进度问题,后台的验证搞定了.
前台只是做了准备工作,代码还没有写.
不过我比你的做法更极端.
我直接把验证的规则写到了数据库的表定义里.给出一个user表的例子

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                                                                      
 

可以看到我直接把规则用json的形式写到了comment里.然后做一个小工具把这个信息根据应用的需求生成符合的结构,

做成相应的前台js文件,和后台对应的配置文件.当然具体的验证规则要手工写了.

虽然有一些细节的问题还要处理,但是都能解决的.

我计划的是基于这种方法,制作一个工具,来更好的实现和管理验证规则,管理字段之间的关系.现在还没有足够的时间.目的当然是通过这种方案,较系统的解决验证规则的问题.

当然对于不同的数据库,实现可能有所不同,例如上面的是MySQL的语法,由于MySQL不支持domain功能,如果换了支持domain功能的数据库的话,实现方法就可能有所不同了,

同样的道理,对于外键也是这样.

当然验证规则的定义是否写到comment里,根据数据库的不同是可以商榷的.

0 请登录后投票
   发表时间:2008-08-08  
楼上的,你这叫通用吗!要是改天老板要求改一下字段,一大堆东西要改,而已如果说要移植数据库,你能担保SQL语句通用吗!!
0 请登录后投票
   发表时间: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界呀,不好混了
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics