基于EasyUI的全站表单AJAX提交验证及返回值提示功能的实现_H5之家

在一个网站建设过程中，对表单的验证、返回信息处理等等常常会占据前端开发人员比较多的时间，有时候甚至会编写出一些总体功能相似的重复代码片段，这不得不让人懊恼。

前段时间在一个项目中，通过对以往表单提交、验证、返回信息处理等功能的分析总结，编写了一个基于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;

}