位置: 首页 / 技术文档 / JavaScript技术
在一个网站建设过程中，对表单的验证、返回信息处理等等常常会占据前端开发人员比较多的时间，有时候甚至会编写出一些总体功能相似的重复代码片段，这不得不让人懊恼。
前段时间在一个项目中，通过对以往表单提交、验证、返回信息处理等功能的分析总结，编写了一个基于EasyUI的全站表单AJAX提交验证及返回值提示功能的通用方法。
伪代码形如：
formsubmit(dModule){
在一些表单中可能会出现联动选单，我们再编写一个联动选单的通用方法，形如：getUS(dModule)；
在一些表单中可能会出现日历选框，我们再编写一个日历选框的通用方法，形如：calendar(dModule)；
在一些表单中可能会出现颜色选框，我们再编写一个颜色选框的通用方法，形如：colorPicker(dModule)；
定义提交时显示的提示信息；
定义处理结果返回时的显示信息，此信息为模板类型，可定义一些通配符，以便在得到具体返回值时进行替换；
定义弹出层及遮罩；
定义onsubmit事件处理函数，如fooaction(){
调用easyUI.checkForm进行表单验证；
定义提交的URL及提交的ARGS；
定义显示返回值方法，如showmsg(stype,msg)；
定义显示失败值方法；
定义AJAX处理函数；
定义AJAX失败时函数；
调用easyUI.ajax.post方法提交表单
}
绑定表单onsubmit方法
}
之后，在每个页面进行调用：formsubmit(document.body);
（在每个页面进行调用不是让你去每一个页面上这么写一遍，记得用src方式引入JS文件即可 ^_^）
以后的页面编写中，就可以不用再去重复编写不同的表单提交处理函数了。
附源代码部分：
formsubmit:function(dModule){
if(!dModule){return;}
//联动部分，可根据项目需求自行编写通用方法
sutil.getUS(dModule);
//日历部分，可参照easyCalendar的使用方法
sutil.calendar(dModule);
//取色部分，可参照easyColorPicker的使用方法
sutil.colorPicker(dModule);
//处理提示
var swaiting = '<div class="waiting"><img src="'+vIjcPath+'loading.gif" /> 请稍候，正在处理您的请求......</div>';
//处理结果模板
var sresult = '<div class="result"><div class="hd">$1</div><div class="bd"><div class="msg">$2</div></div></div>';
//输出设备，遮罩、弹出层
var dmask = sutil.mask;
var dpopup = sutil.formpopup;
dpopup.fixsize = true;
dpopup.autofullsize = false;
dpopup.setShadow();
dpopup.onopen = function(){dmask.open();};
dpopup.onclose = function(){dmask.close();};
//onsubmit事件处理函数
var fooaction = function(){
//表单验证
var bc = easyUI.checkForm(this);
if(!bc){return false;}
//取表单数据
var scaption = this.getAttribute('caption');
var dlms = this.elements,l = dlms.length-1;
var surl = this.action,args = [];
var dbtn = easyUI.getElementsBy('type','submit','button',this)[0];//取提交按钮
var pn = '',pt = '';
for(var i=0;i<l;i++){
pn = dlms[i].name;
pt = dlms[i].type;
if((pt=='checkbox'||pt=='radio')&&!dlms[i].checked){continue;}
args.push(pn+'='+encodeURI(dlms[i].value));
}
//提交过程中禁用提交按钮
if(dbtn){dbtn.disabled = true;}
//显示信息
var showmsg = function(stype,msg){
msg = msg.replace(/\\n/g,'<br/>');
var stitle = scaption?scaption:'提交表单';
var shd = (stype==1)?'<h3 class="error">错误!您提交的请求遇到了问题!</h3>':'<h3 class="success">您提交的请求已处理成功!</h3>';
var sbox = sresult.replace(/\$1/g,shd).replace(/\$2/g,msg);
dpopup.setTitle(stitle);
dpopup.setContent(sbox);
if(!dpopup.isopen){dpopup.open();}
};
//显示错误信息
var fmsg = function(msg){
showmsg(1,msg);
if(dbtn){dbtn.disabled = false;}
};
//AJAX提交处理函数
var cbfoo = function(xhr){
if(!xhr){fmsg('数据处理失败！xmlhttp对象未就绪！');return;}
var rtxt = xhr.responseText;
if(!rtxt){fmsg('数据处理失败！服务器没有返回值！');return;}
//返回值约定为code,descript,jumpUrl
var astr = rtxt.split(','),scode = astr[0]||'20156',desc = astr[1],jump = astr[2];
desc = desc?unescape(decodeURI(desc)):'未知错误!';
jump = jump?unescape(decodeURI(jump)):false;
if(isNaN(scode)){fmsg('数据处理失败！服务器返回值不正确！');return;}
switch(scode){
case '-1'://状态码code为-1时则显示成功信息
showmsg(0,desc);
//如果有跳转URL，则在关闭提示信息层后跳转
if(!!jump){dpopup.onclose = function(){dmask.close();window.location = jump;};}
break;
default:
fmsg('数据处理失败！'+desc+'！');break;
}
};
//AJAX失败处理函数
var ffoo = function(xhr){
var sts = (xhr)?xhr.status:'20156';
fmsg('数据处理失败！服务器错误，错误代码：'+sts+'！');
};
//AJAX提交
dpopup.setTitle('正在处理您的请求');
dpopup.setContent(swaiting);
dpopup.open();
easyUI.ajax.post(surl,args.join('&'),true,cbfoo,ffoo);
return false;
};
//遍历所有dModule中出现的表单，并绑定onsubmit处理函数
var dforms = easyUI.getElementsBy('qtype','ajax','form',dModule),l = dforms.length;
for(var i=0;i<l;i++){
dforms[i].onsubmit = fooaction;
}
}
类别：JavaScript技术 来源：本站原创 作者：hpping 日期：2009-08-24 14:53