jQuery的ajax的form提交方法应用

1.如果不用ajax的form提交，就必须把表单的每一条数据进行获取，并提交给action进行处理。这样做比较麻烦，现在用了jQuery的easyui，使用封装好的ajax的form提交。脚本代码如下：

//提交表单
function sysusersave(){
if($.formValidator.pageIsValid()){//校验表单输入信息是否合法
//使用jquery的ajax from提交，指定from的id和回调方法，提交的url使用提from中的action，参数为空，传递JSON字符串（去掉也不报错）
jquerySubByFId('sysusereditform',sysusersave_callback,null,"json");
}

}
//from提交的回调方法,data是提交的返回的数据
function sysusersave_callback(data){
message_alert(data);
}

注意：上面的回调函数，是action处理后，返回JSON的数据传给了参数data。

上面函数具体的实现（没有封装的代码）：要传递四个参数

/*
*form提交(post方式)
*
*formId form Id
*callbackfn 回调函数名(要求函数必须有参数且不能多与两个,一个参数时参数为响应文本,两个参数时第一个参数为响应文本)
*param 回调函数参数(如果为null,那么调用一个参数的回调函数,否则调用两个参数的回调函数)
*/
function jquerySubByFId(formId,callbackFn,param,dataType){
var formObj = jQuery("#" + formId);
var options = {
dataType:  ("undefined"!=dataType && null!=dataType)?dataType:"json",
success: function(responseText) {
if(param === null){
callbackFn(responseText);
}else{
callbackFn(responseText,param);
}
}
};
formObj.ajaxSubmit(options);
}

2.校验表单输入信息是否合法：使用的是jQuery easyui的内置校验器，如下 ，列举出来的对用户账号进行的校验：

$(function (){
/******表单校验*************/
$.formValidator.initConfig({
formID : "sysusereditform",
theme : "Default",
onError : function(msg, obj, errorlist) {
//alert(msg);
}
});
//用户账号
$("#sysuser_userid").formValidator({
onShow : "",
onCorrect:" "
}).inputValidator({
min : 1,
max : 20,
onError : "请输入用户账号(最长10个字符)"
});
});

校验的具体方法：

//====================================================================================================
// [插件名称] jQuery formValidator
//----------------------------------------------------------------------------------------------------
// [描    述] jQuery formValidator表单验证插件，它是基于jQuery类库，实现了js脚本于页面的分离。对一个表
//            单对象，你只需要写一行代码就可以轻松实现20种以上的脚本控制。现支持一个表单元素累加很多种
//            校验方式,采用配置信息的思想，而不是把信息写在表单元素上，能比较完美的实现ajax请求。
//----------------------------------------------------------------------------------------------------
// [作者网名] 猫冬
// [邮    箱] wzmaodong@126.com
// [作者博客] http://wzmaodong.cnblogs.com // [QQ群交流] 74106519
// [更新日期] 2011-05-22
// [版 本 号] ver4.0.1
//====================================================================================================
(function($) {

$.formValidator =
{
//全局配置
initConfig : function(controlOptions)
{
var settings =
{
debug:false,								//调试模式
validatorGroup : "1",						//分组号
alertMessage:false,							//是否为弹出窗口提示模式
validObjects:[],							//参加校验的控件集合
ajaxObjects:"",							//传到服务器的控件列表
forceValid:false,							//控件输入正确之后，才允许失去焦点
onSuccess: function() {return true;},		//提交成功后的回调函数
onError: $.noop,						//提交失败的回调函数
submitOnce:false,							//页面是否提交一次，不会停留
formID:"",					//表单ID
submitButtonID:"",			//提交按钮ID
autoTip: false,				//是否自动构建提示层
tidyMode:false,				//精简模式
errorFocus:true,			//第一个错误的控件获得焦点
wideWord:true,				//一个汉字当做2个长度
status:"",					//提交的状态：submited、sumbiting、sumbitingWithAjax
submitAfterAjaxPrompt : "当前有数据正在进行服务器端校验，请稍候",	//控件失去焦点后，触发ajax校验，没有返回结果前的错误提示
validCount:0,			//含ajaxValidator的控件个数
ajaxCountSubmit:0,		//提交的时候触发的ajax验证个数
ajaxCountValid:0,		//失去焦点时候触发的ajax验证个数
inIframe:false

};
controlOptions = controlOptions || {};
$.extend(settings, controlOptions);
//如果是精简模式，发生错误的时候，第一个错误的控件就不获得焦点
if(settings.tidyMode){settings.errorFocus=false};
//如果填写了表单和按钮，就注册验证事件
if(settings.formID!=""){
$("#"+settings.formID).submit(function(){return $.formValidator.bindSubmit(settings);});
}
else if(settings.submitButtonID!="")
{
$("#"+settings.submitButtonID).click(function(){return $.formValidator.bindSubmit(settings);});
}
$('body').data(settings.validatorGroup, settings);
},

//调用验证函数
bindSubmit : function(settings)
{
if (settings.ajaxCountValid > 0 && settings.submitAfterAjaxPrompt != "") {
alert(settings.submitAfterAjaxPrompt);
return false;
}
return $.formValidator.pageIsValid(settings.validatorGroup);
},

//各种校验方式支持的控件类型
sustainType : function(id,setting)
{
var elem = $("#"+id).get(0);
var srcTag = elem.tagName;
var stype = elem.type;
switch(setting.validateType)
{
case "InitValidator":
return true;
case "InputValidator":
return (srcTag == "INPUT" || srcTag == "TEXTAREA" || srcTag == "SELECT");
case "CompareValidator":
return ((srcTag == "INPUT" || srcTag == "TEXTAREA") ? (stype != "checkbox" && stype != "radio") : false);
case "AjaxValidator":
return (stype == "text" || stype == "textarea" || stype == "file" || stype == "password" || stype == "select-one");
case "RegexValidator":
return ((srcTag == "INPUT" || srcTag == "TEXTAREA") ? (stype != "checkbox" && stype != "radio") : false);
case "FunctionValidator":
return true;
}
},

//如果validator对象对应的element对象的validator属性追加要进行的校验。
appendValid : function(id, setting )
{
//如果是各种校验不支持的类型，就不追加到。返回-1表示没有追加成功
if(!$.formValidator.sustainType(id,setting)) return -1;
var srcjo = $("#"+id).get(0);
//重新初始化
if (setting.validateType=="InitValidator" || srcjo.settings == undefined ){srcjo.settings = new Array();}
var len = srcjo.settings.push( setting );
srcjo.settings[len - 1].index = len - 1;
return len - 1;
},

//设置显示信息
setTipState : function(elem,showclass,showmsg)
{
var initConfig = $('body').data(elem.validatorGroup);
var tip = $("#"+elem.settings[0].tipID);
if(showmsg==null || showmsg=="")
{
tip.hide();
}
else
{
if(initConfig.tidyMode)
{
//显示和保存提示信息
$("#fv_content").html(showmsg);
elem.Tooltip = showmsg;
if(showclass!="onError"){tip.hide();}
}
else
{
tip.show().removeClass().addClass( showclass ).html( showmsg );
}
}
},

//把提示层重置成原始提示(如果有defaultPassed,应该设置为onCorrect)
resetTipState : function(validatorGroup)
{
if(validatorGroup == undefined){validatorGroup = "1"};
var initConfig = $('body').data(validatorGroup);
$.each(initConfig.validObjects,function(){
var elem = this.get(0);
var setting = elem.settings[0];
var passed = setting.defaultPassed;
$.formValidator.setTipState(elem, passed ? "onCorrect" : "onShow", passed ? setting.onCorrect : setting.onShow);
});
},

//设置错误的显示信息
setFailState : function(tipID,showmsg)
{
var tip = $("#"+tipID);
tip.removeClass().addClass("onError").html(showmsg);
},

//根据单个对象,正确:正确提示,错误:错误提示
showMessage : function(returnObj)
{
var id = returnObj.id;
var elem = $("#"+id).get(0);
var isValid = returnObj.isValid;
var setting = returnObj.setting;//正确:setting[0],错误:对应的setting[i]
var showmsg = "",showclass = "";
var intiConfig = $('body').data(elem.validatorGroup);
if (!isValid)
{
showclass = "onError";
if(setting.validateType=="AjaxValidator")
{
if(setting.lastValid=="")
{
showclass = "onLoad";
showmsg = setting.onWait;
}
else
{
showmsg = setting.onError;
}
}
else
{
showmsg = (returnObj.errormsg==""? setting.onError : returnObj.errormsg);

}
if(intiConfig.alertMessage)
{
if(elem.validValueOld!=$(elem).val()){alert(showmsg);}
}
else
{
$.formValidator.setTipState(elem,showclass,showmsg);
}
}
else
{
//验证成功后,如果没有设置成功提示信息,则给出默认提示,否则给出自定义提示;允许为空,值为空的提示
showmsg = $.formValidator.isEmpty(id) ? setting.onEmpty : setting.onCorrect;
$.formValidator.setTipState(elem,"onCorrect",showmsg);
}
return showmsg;
},

showAjaxMessage : function(returnObj)
{
var elem = $("#"+returnObj.id).get(0);
var setting = elem.settings[returnObj.ajax];
var validValueOld = elem.validValueOld;
var validvalue = $(elem).val();
returnObj.setting = setting;
//defaultPassed还未处理
if(validValueOld!= validvalue || validValueOld == validvalue && !elem.onceValided)
{
$.formValidator.ajaxValid(returnObj);
}
else
{
if(setting.isValid!=undefined && !setting.isValid){
elem.lastshowclass = "onError";
elem.lastshowmsg = setting.onError;
}
$.formValidator.setTipState(elem,elem.lastshowclass,elem.lastshowmsg);
}
},

//获取指定字符串的长度
getLength : function(id)
{
var srcjo = $("#"+id);
var elem = srcjo.get(0);
var sType = elem.type;
var len = 0;
switch(sType)
{
case "text":
case "hidden":
case "password":
case "textarea":
case "file":
var val = srcjo.val();
var initConfig = $('body').data(elem.validatorGroup);
if (initConfig.wideWord)
{
for (var i = 0; i < val.length; i++)
{
len = len + ((val.charCodeAt(i) >= 0x4e00 && val.charCodeAt(i) <= 0x9fa5) ? 2 : 1);
}
}
else{
len = val.length;
}
break;
case "checkbox":
case "radio":
len = $("input[type='"+sType+"'][name='"+srcjo.attr("name")+"']:checked").length;
break;
case "select-one":
len = elem.options ? elem.options.selectedIndex : -1;
break;
case "select-multiple":
len = $("select[name="+elem.name+"] option:selected").length;
break;
}
return len;
},

//结合empty这个属性，判断仅仅是否为空的校验情况。
isEmpty : function(id)
{
return ($("#"+id).get(0).settings[0].empty && $.formValidator.getLength(id)==0);
},

//对外调用：判断单个表单元素是否验证通过，不带回调函数
isOneValid : function(id)
{
return $.formValidator.oneIsValid(id).isValid;
},

//验证单个是否验证通过,正确返回settings[0],错误返回对应的settings[i]
oneIsValid : function (id)
{
var returnObj = new Object();
var elem = $("#"+id).get(0);
returnObj.initConfig = $('body').data(elem.validatorGroup);
returnObj.id = id;
returnObj.ajax = -1;
returnObj.errormsg = "";       //自定义错误信息
var settings = elem.settings;
var settingslen = settings.length;
var validateType;
//只有一个formValidator的时候不检验
if (settingslen==1){settings[0].bind=false;}
if(!settings[0].bind){return null;}
for ( var i = 0 ; i < settingslen ; i ++ )
{
if(i==0){
//如果为空，直接返回正确
if($.formValidator.isEmpty(id)){
returnObj.isValid = true;
returnObj.setting = settings[0];
break;
}
continue;
}
returnObj.setting = settings[i];
validateType = settings[i].validateType;
//根据类型触发校验
switch(validateType)
{
case "InputValidator":
$.formValidator.inputValid(returnObj);
break;
case "CompareValidator":
$.formValidator.compareValid(returnObj);
break;
case "RegexValidator":
$.formValidator.regexValid(returnObj);
break;
case "FunctionValidator":
$.formValidator.functionValid(returnObj);
break;
case "AjaxValidator":
//如果是ajax校验，这里直接取上次的结果值
returnObj.ajax = i
break;
}
//校验过一次
elem.onceValided = true;
if(!settings[i].isValid) {
returnObj.isValid = false;
returnObj.setting = settings[i];
break;
}else{
returnObj.isValid = true;
returnObj.setting = settings[0];
if (settings[i].validateType == "AjaxValidator"){break};
}
}
return returnObj;
},

//验证所有需要验证的对象，并返回是否验证成功（如果曾经触发过ajaxValidator，提交的时候就不触发校验，直接读取结果）
pageIsValid : function (validatorGroup)
{
if(validatorGroup == undefined){validatorGroup = "1"};
var isValid = true,returnObj,firstErrorMessage="",errorMessage;
var error_tip = "^",thefirstid,name,name_list="^";
var errorlist = new Array();
//设置提交状态、ajax是否出错、错误列表
var initConfig = $('body').data(validatorGroup);
initConfig.status = "sumbiting";
initConfig.ajaxCountSubmit = 0;
//遍历所有要校验的控件,如果存在ajaxValidator就先直接触发
$.each(initConfig.validObjects,function()
{
if (this.settings[0].bind && this.validatorAjaxIndex!=undefined && this.onceValided == undefined) {
returnObj = $.formValidator.oneIsValid(this.id);
if (returnObj.ajax == this.validatorAjaxIndex) {
initConfig.status = "sumbitingWithAjax";
$.formValidator.ajaxValid(returnObj);
}
}
});
//如果有提交的时候有触发ajaxValidator，所有的处理都放在ajax里处理
if(initConfig.ajaxCountSubmit > 0){return false}
//遍历所有要校验的控件
$.each(initConfig.validObjects,function()
{
//只校验绑定的控件
if(this.settings[0].bind){
name = this.name;
//相同name只校验一次
if (name_list.indexOf("^"+name+"^") == -1) {
onceValided = this.onceValided == undefined ? false : this.onceValided;
if(name){name_list = name_list + name + "^"};
returnObj = $.formValidator.oneIsValid(this.id);
if (returnObj) {
//校验失败,获取第一个发生错误的信息和ID
if (!returnObj.isValid) {
//记录不含ajaxValidator校验函数的校验结果
isValid = false;
errorMessage = returnObj.errormsg == "" ? returnObj.setting.onError : returnObj.errormsg;
errorlist[errorlist.length] = errorMessage;
if (thefirstid == null) {thefirstid = returnObj.id};
if(firstErrorMessage==""){firstErrorMessage=errorMessage};
}
//为了解决使用同个TIP提示问题:后面的成功或失败都不覆盖前面的失败
if (!initConfig.alertMessage) {
var tipID = this.settings[0].tipID;
if (error_tip.indexOf("^" + tipID + "^") == -1) {
if (!returnObj.isValid) {error_tip = error_tip + tipID + "^"};
$.formValidator.showMessage(returnObj);
}
}
}
}
}
});

//成功或失败进行回调函数的处理，以及成功后的灰掉提交按钮的功能
if(isValid)
{
initConfig.onSuccess();
if(initConfig.submitOnce){$(":submit,:button,:reset").attr("disabled",true);}
}
else
{
initConfig.onError(firstErrorMessage, $("#" + thefirstid).get(0), errorlist);
if (thefirstid && initConfig.errorFocus) {$("#" + thefirstid).focus()};
}
initConfig.status="init";
return !initConfig.debug && isValid;
},

//ajax校验
ajaxValid : function(returnObj)
{
var id = returnObj.id;
var srcjo = $("#"+id);
var elem = srcjo.get(0);
var initConfig = returnObj.initConfig;
var settings = elem.settings;
var setting = settings[returnObj.ajax];
var ls_url = setting.url;
//获取要传递的参数
var validatorGroup = elem.validatorGroup;
var initConfig = $('body').data(validatorGroup);
var parm = $(initConfig.ajaxObjects).serialize();
//添加触发的控件名、随机数、传递的参数
parm = "clientid=" + id + "&" +(setting.randNumberName ? setting.randNumberName+"="+((new Date().getTime())+Math.round(Math.random() * 10000)) : "") + (parm.length > 0 ? "&" + parm : "");
ls_url = ls_url + (ls_url.indexOf("?") > -1 ? ("&" + parm) : ("?" + parm));
//发送ajax请求
$.ajax(
{
type : setting.type,
url : ls_url,
cache : setting.cache,
data : setting.data,
async : setting.async,
timeout : setting.timeout,
dataType : setting.dataType,
success : function(data, textStatus, jqXHR){
var lb_ret,ls_status,ls_msg;
$.formValidator.dealAjaxRequestCount(validatorGroup,-1);
//根据业务判断设置显示信息
lb_ret = setting.success(data, textStatus, jqXHR);
setting.isValid = lb_ret;
if(lb_ret){
ls_status = "onCorrect";
ls_msg = settings[0].onCorrect;
}else{
ls_status = "onError";
ls_msg = setting.onError;
}
$.formValidator.setTipState(elem,ls_status,ls_msg);
//提交的时候触发了ajax校验，等ajax校验完成，无条件重新校验
if(returnObj.initConfig.status=="sumbitingWithAjax" && returnObj.initConfig.ajaxCountSubmit == 0)
{
if (initConfig.formID != "") {
$('#' + initConfig.formID).trigger('submit');
}else if (initConfig.formID != ""){
$('#' + initConfig.submitButtonID).trigger('click');
}
}
},
complete : function(jqXHR, textStatus){
if(setting.buttons && setting.buttons.length > 0){setting.buttons.attr({"disabled":false})};
setting.complete(jqXHR, textStatus);
},
beforeSend : function(jqXHR, configs){
//本控件如果正在校验，就中断上次
if (this.lastXMLHttpRequest) {this.lastXMLHttpRequest.abort()};
this.lastXMLHttpRequest = jqXHR;
//再服务器没有返回数据之前，先回调提交按钮
if(setting.buttons && setting.buttons.length > 0){setting.buttons.attr({"disabled":true})};
var isValid = setting.beforeSend(jqXHR,configs);
if(isValid)
{
setting.isValid = false;		//如果前面ajax请求成功了，再次请求之前先当作错误处理
$.formValidator.setTipState(elem,"onLoad",settings[returnObj.ajax].onWait);
}
setting.lastValid = "-1";
if(isValid){$.formValidator.dealAjaxRequestCount(validatorGroup,1);}
return isValid;
},
error : function(jqXHR, textStatus, errorThrown){
$.formValidator.dealAjaxRequestCount(validatorGroup,-1);
$.formValidator.setTipState(elem,"onError",setting.onError);
setting.isValid = false;
setting.error(jqXHR, textStatus, errorThrown);
},
processData : setting.processData
});
},

//处理ajax的请求个数
dealAjaxRequestCount : function(validatorGroup,val)
{
var initConfig = $('body').data(validatorGroup);
initConfig.ajaxCountValid = initConfig.ajaxCountValid + val;
if (initConfig.status == "sumbitingWithAjax") {
initConfig.ajaxCountSubmit = initConfig.ajaxCountSubmit + val;
}
},

//对正则表达式进行校验（目前只针对input和textarea）
regexValid : function(returnObj)
{
var id = returnObj.id;
var setting = returnObj.setting;
var srcTag = $("#"+id).get(0).tagName;
var elem = $("#"+id).get(0);
var isValid;
//如果有输入正则表达式，就进行表达式校验
if(elem.settings[0].empty && elem.value==""){
setting.isValid = true;
}
else
{
var regexArray = setting.regExp;
setting.isValid = false;
if((typeof regexArray)=="string") regexArray = [regexArray];
$.each(regexArray, function() {
var r = this;
if(setting.dataType=="enum"){r = eval("regexEnum."+r);}
if(r==undefined || r=="")
{
return false;
}
isValid = (new RegExp(r, setting.param)).test($(elem).val());

if(setting.compareType=="||" && isValid)
{
setting.isValid = true;
return false;
}
if(setting.compareType=="&&" && !isValid)
{
return false
}
});
if(!setting.isValid) setting.isValid = isValid;
}
},

//函数校验。返回true/false表示校验是否成功;返回字符串表示错误信息，校验失败;如果没有返回值表示处理函数，校验成功
functionValid : function(returnObj)
{
var id = returnObj.id;
var setting = returnObj.setting;
var srcjo = $("#"+id);
var lb_ret = setting.fun(srcjo.val(),srcjo.get(0));
if(lb_ret != undefined)
{
if((typeof lb_ret) === "string"){
setting.isValid = false;
returnObj.errormsg = lb_ret;
}else{
setting.isValid = lb_ret;
}
}
},

//对input和select类型控件进行校验
inputValid : function(returnObj)
{
var id = returnObj.id;
var setting = returnObj.setting;
var srcjo = $("#"+id);
var elem = srcjo.get(0);
var val = srcjo.val();
var sType = elem.type;
var len = $.formValidator.getLength(id);
var empty = setting.empty,emptyError = false;
switch(sType)
{
case "text":
case "hidden":
case "password":
case "textarea":
case "file":
if (setting.type == "size") {
empty = setting.empty;
if(!empty.leftEmpty){
emptyError = (val.replace(/^[ \s]+/, '').length != val.length);
}
if(!emptyError && !empty.rightEmpty){
emptyError = (val.replace(/[ \s]+$/, '').length != val.length);
}
if(emptyError && empty.emptyError){returnObj.errormsg= empty.emptyError}
}
case "checkbox":
case "select-one":
case "select-multiple":
case "radio":
var lb_go_on = false;
if(sType=="select-one" || sType=="select-multiple"){setting.type = "size";}
var type = setting.type;
if (type == "size") {		//获得输入的字符长度，并进行校验
if(!emptyError){lb_go_on = true}
if(lb_go_on){val = len}
}
else if (type =="date" || type =="datetime")
{
var isok = false;
if(type=="date"){lb_go_on = isDate(val)};
if(type=="datetime"){lb_go_on = isDate(val)};
if(lb_go_on){val = new Date(val);setting.min=new Date(setting.min);setting.max=new Date(setting.max);};
}else{
stype = (typeof setting.min);
if(stype =="number")
{
val = (new Number(val)).valueOf();
if(!isNaN(val)){lb_go_on = true;}
}
if(stype =="string"){lb_go_on = true;}
}
setting.isValid = false;
if(lb_go_on)
{
if(val < setting.min || val > setting.max){
if(val < setting.min && setting.onErrorMin){
returnObj.errormsg= setting.onErrorMin;
}
if(val > setting.min && setting.onErrorMax){
returnObj.errormsg= setting.onErrorMax;
}
}
else{
setting.isValid = true;
}
}
break;
}
},

//对两个控件进行比较校验
compareValid : function(returnObj)
{
var id = returnObj.id;
var setting = returnObj.setting;
var srcjo = $("#"+id);
var desjo = $("#"+setting.desID );
var ls_dataType = setting.dataType;

curvalue = srcjo.val();
ls_data = desjo.val();
if(ls_dataType=="number")
{
if(!isNaN(curvalue) && !isNaN(ls_data)){
curvalue = parseFloat(curvalue);
ls_data = parseFloat(ls_data);
}
else{
return;
}
}
if(ls_dataType=="date" || ls_dataType=="datetime")
{
var isok = false;
if(ls_dataType=="date"){isok = (isDate(curvalue) && isDate(ls_data))};
if(ls_dataType=="datetime"){isok = (isDateTime(curvalue) && isDateTime(ls_data))};
if(isok){
curvalue = new Date(curvalue);
ls_data = new Date(ls_data)
}
else{
return;
}
}

switch(setting.operateor)
{
case "=":
setting.isValid = (curvalue == ls_data);
break;
case "!=":
setting.isValid = (curvalue != ls_data);
break;
case ">":
setting.isValid = (curvalue > ls_data);
break;
case ">=":
setting.isValid = (curvalue >= ls_data);
break;
case "<":
setting.isValid = (curvalue < ls_data);
break;
case "<=":
setting.isValid = (curvalue <= ls_data);
break;
default :
setting.isValid = false;
break;
}
},

//定位漂浮层
localTooltip : function(e)
{
e = e || window.event;
var mouseX = e.pageX || (e.clientX ? e.clientX + document.body.scrollLeft : 0);
var mouseY = e.pageY || (e.clientY ? e.clientY + document.body.scrollTop : 0);
$("#fvtt").css({"top":(mouseY+2)+"px","left":(mouseX-40)+"px"});
},

reloadAutoTip : function(validatorGroup)
{
if(validatorGroup == undefined) validatorGroup = "1";
var initConfig = $('body').data(validatorGroup);
$.each(initConfig.validObjects,function()
{
if(initConfig.autoTip && !initConfig.tidyMode)
{
//获取层的ID、相对定位控件的ID和坐标
var setting = this.settings[0];
var relativeID = "#"+setting.relativeID;
var offset = $(relativeID ).offset();
var y = offset.top;
var x = $(relativeID ).width() + offset.left;
$("#"+setting.tipID).parent().show().css({left: x+"px", top: y+"px"});
}
});
}
};

//每个校验控件必须初始化的
$.fn.formValidator = function(cs)
{
var setting =
{
validatorGroup : "1",
empty :false,
autoModify : false,
onShow :"请输入内容",
onFocus: "请输入内容",
onCorrect: "输入正确",
onEmpty: "输入内容为空",
defaultValue : null,
bind : true,
ajax : false,
validateType : "InitValidator",
tipCss :
{
"left" : "10px",
"top" : "1px",
"height" : "20px",
"width":"250px"
},
triggerEvent:"blur",
forceValid : false,
tipID : null,
relativeID : null,
index : 0
};

//获取该校验组的全局配置信息
cs = cs || {};
if(cs.validatorGroup == undefined){cs.validatorGroup = "1"};

var initConfig = $('body').data(cs.validatorGroup);

//校验索引号，和总记录数
initConfig.validCount += 1;

//如果为精简模式，tipCss要重新设置初始值
if(initConfig.tidyMode){setting.tipCss = {"left" : "2px","width":"22px","height":"22px","display":"none"}};

//弹出消息提示模式，自动修复错误
if(initConfig.alertMessage){setting.autoModify=true};

//先合并整个配置(深度拷贝)
$.extend(true,setting, cs);

return this.each(function(e)
{
//记录该控件的校验顺序号和校验组号
this.validatorIndex = initConfig.validCount - 1;
this.validatorGroup = cs.validatorGroup;
var jqobj = $(this);
//自动形成TIP
var setting_temp = {};
$.extend(true,setting_temp, setting);
var tip = setting_temp.tipID ? setting_temp.tipID : this.id+"Tip";
if(initConfig.autoTip)
{
if(!initConfig.tidyMode)
{
//获取层的ID、相对定位控件的ID和坐标
if($("body [id="+tip+"]").length==0)
{
var relativeID = setting_temp.relativeID ? setting_temp.relativeID : this.id;
var offset = $("#"+relativeID ).position();
var y = offset.top;
var x = $("#"+relativeID ).width() + offset.left;
var formValidateTip = $("<div class='formValidateTip'></div>");
if(initConfig.inIframe){formValidateTip.hide();}
formValidateTip.appendTo($("body")).css({left: x+"px", top: y+"px"}).prepend($('<div id="'+tip+'"></div>').css(setting_temp.tipCss));
setting.relativeID = relativeID ;
}
}
else
{
jqobj.showTooltips();
}
}
//每个控件都要保存这个配置信息、为了取数方便，冗余一份控件总体配置到控件上
setting.tipID = tip;
$.formValidator.appendValid(this.id,setting);

//保存控件ID
if($.inArray(jqobj,initConfig.validObjects) == -1)
{
if (setting_temp.ajax) {
var ajax = initConfig.ajaxObjects;
initConfig.ajaxObjects = ajax + (ajax != "" ? ",#" : "#") + this.id;
}
initConfig.validObjects.push(this);
}

//初始化显示信息
if(!initConfig.alertMessage){
$.formValidator.setTipState(this,"onShow",setting.onShow);
}

var srcTag = this.tagName.toLowerCase();
var stype = this.type;
var defaultval = setting.defaultValue;
//处理默认值
if(defaultval){
jqobj.val(defaultval);
}

if(srcTag == "input" || srcTag=="textarea")
{
//注册获得焦点的事件。改变提示对象的文字和样式，保存原值
jqobj.focus(function()
{
if(!initConfig.alertMessage){
//保存原来的状态
var tipjq = $("#"+tip);
this.lastshowclass = tipjq.attr("class");
this.lastshowmsg = tipjq.html();
$.formValidator.setTipState(this,"onFocus",setting.onFocus);
}
if (stype == "password" || stype == "text" || stype == "textarea" || stype == "file") {
this.validValueOld = jqobj.val();
}
});
//注册失去焦点的事件。进行校验，改变提示对象的文字和样式；出错就提示处理
jqobj.bind(setting.triggerEvent, function(){
var settings = this.settings;
var returnObj = $.formValidator.oneIsValid(this.id);
if(returnObj==null){return;}
if(returnObj.ajax >= 0)
{
$.formValidator.showAjaxMessage(returnObj);
}
else
{
var showmsg = $.formValidator.showMessage(returnObj);
if(!returnObj.isValid)
{
//自动修正错误
var auto = setting.autoModify && (this.type=="text" || this.type=="textarea" || this.type=="file");
if(auto)
{
$(this).val(this.validValueOld);
if(!initConfig.alertMessage){$.formValidator.setTipState(this,"onShow",setting.onShow)};
}
else
{
if(initConfig.forceValid || setting.forceValid){
alert(showmsg);this.focus();
}
}
}
}
});
}
else if (srcTag == "select")
{
jqobj.bind({
//获得焦点
focus: function(){
if (!initConfig.alertMessage) {
$.formValidator.setTipState(this, "onFocus", setting.onFocus)
};
},
//失去焦点
blur: function(){$(this).trigger("change")},
//选择项目后触发
change: function(){
var returnObj = $.formValidator.oneIsValid(this.id);
if(returnObj==null){return;}
if ( returnObj.ajax >= 0){
$.formValidator.showAjaxMessage(returnObj);
}else{
$.formValidator.showMessage(returnObj);
}
}
});
}
});
};

$.fn.inputValidator = function(controlOptions)
{
var settings =
{
isValid : false,
min : 0,
max : 99999999999999,
type : "size",
onError:"输入错误",
validateType:"InputValidator",
empty:{leftEmpty:true,rightEmpty:true,leftEmptyError:null,rightEmptyError:null}
};
controlOptions = controlOptions || {};
$.extend(true, settings, controlOptions);
return this.each(function(){
$.formValidator.appendValid(this.id,settings);
});
};

$.fn.compareValidator = function(controlOptions)
{
var settings =
{
isValid : false,
desID : "",
operateor :"=",
onError:"输入错误",
validateType:"CompareValidator"
};
controlOptions = controlOptions || {};
$.extend(true, settings, controlOptions);
return this.each(function(){
$.formValidator.appendValid(this.id,settings);
});
};

$.fn.regexValidator = function(controlOptions)
{
var settings =
{
isValid : false,
regExp : "",
param : "i",
dataType : "string",
compareType : "||",
onError:"输入的格式不正确",
validateType:"RegexValidator"
};
controlOptions = controlOptions || {};
$.extend(true, settings, controlOptions);
return this.each(function(){
$.formValidator.appendValid(this.id,settings);
});
};

$.fn.functionValidator = function(controlOptions)
{
var settings =
{
isValid : true,
fun : function(){this.isValid = true;},
validateType:"FunctionValidator",
onError:"输入错误"
};
controlOptions = controlOptions || {};
$.extend(true, settings, controlOptions);
return this.each(function(){
$.formValidator.appendValid(this.id,settings);
});
};

$.fn.ajaxValidator = function(controlOptions)
{
var settings =
{
type : "GET",
url : "",
dataType : "html",
timeout : 100000,
data : null,
async : true,
cache : false,
beforeSend : function(){return true;},
success : function(){return true;},
complete : function(){},
processData : true,
error : function(){},
isValid : false,
lastValid : "",
buttons : null,
oneceValid : false,
randNumberName : "rand",
onError:"服务器校验没有通过",
onWait:"正在等待服务器返回数据",
ajaxExistsError:"前面的校验尚未完成，请稍候...",
validateType:"AjaxValidator"
};
controlOptions = controlOptions || {};
$.extend(true, settings, controlOptions);
return this.each(function()
{
var initConfig = $('body').data(this.validatorGroup);
var ajax = initConfig.ajaxObjects;
if((ajax+",").indexOf("#"+this.id+",") == -1)
{
initConfig.ajaxObjects = ajax + (ajax != "" ? ",#" : "#") + this.id;
}
this.validatorAjaxIndex = $.formValidator.appendValid(this.id,settings);
});
};

//指定控件显示通过或不通过样式
$.fn.defaultPassed = function(onShow)
{
return this.each(function()
{
var settings = this.settings;
settings[0].defaultPassed = true;
for ( var i = 1 ; i < settings.length ; i ++ )
{
settings[i].isValid = true;
if(!$('body').data(settings[0].validatorGroup).alertMessage){
var ls_style = onShow ? "onShow" : "onCorrect";
$.formValidator.setTipState(this,ls_style,settings[0].onCorrect);
}
}
});
};

//指定控件不参加校验
$.fn.unFormValidator = function(unbind)
{
return this.each(function()
{
this.settings[0].bind = !unbind;
if(unbind){
$("#"+this.settings[0].tipID).hide();
}else{
$("#"+this.settings[0].tipID).show();
}
});
};

//显示漂浮显示层
$.fn.showTooltips = function()
{
if($("body [id=fvtt]").length==0){
fvtt = $("<div id='fvtt' style='position:absolute;z-index:56002'></div>");
$("body").append(fvtt);
fvtt.before("<iframe src='about:blank' class='fv_iframe' scrolling='no' frameborder='0'></iframe>");

}
return this.each(function()
{
jqobj = $(this);
s = $("<span class='top' id=fv_content style='display:block'></span>");
b = $("<b class='bottom' style='display:block' />");
this.tooltip = $("<span class='fv_tooltip' style='display:block'></span>").append(s).append(b).css({"filter":"alpha(opacity:95)","KHTMLOpacity":"0.95","MozOpacity":"0.95","opacity":"0.95"});
//注册事件
jqobj.bind({
mouseover : function(e){
$("#fvtt").append(this.tooltip);
$("#fv_content").html(this.Tooltip);
$.formValidator.localTooltip(e);
},
mouseout : function(){
$("#fvtt").empty();
},
mousemove: function(e){
$("#fv_content").html(this.Tooltip);
$.formValidator.localTooltip(e);
}
});
});
}
})(jQuery);

使用这些已经写好的方法来处理表单数据，要导入对应的js库

以下HTML的代码是把项目中应用到的js库引入到程序中：

<script type="text/javascript" src="${baseurl}js/jquery-1.4.4.min.js"></script>
<SCRIPT type="text/javascript" src="${baseurl}js/easyui/jquery.easyui.min.1.2.2.js"></SCRIPT>
<script type="text/javascript" src="${baseurl}js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${baseurl}js/jquery.form.min.js"></script>

<script type="text/javascript" src="${baseurl}js/custom.jquery.form.js"></script>
<script type="text/javascript" src="${baseurl}js/custom.box.main.js"></script>
<script type="text/javascript" src="${baseurl}js/jquery.ajax.custom.extend.js"></script>

<SCRIPT type="text/javascript" src="${baseurl}js/menuload.js"></SCRIPT>

<script type="text/javascript" src="${baseurl}js/My97DatePicker/WdatePicker.js"></script>

<script src="${baseurl}js/jqueryvalidator/formValidator-4.1.3.js" type="text/javascript" charset="UTF-8"></script>
<script src="${baseurl}js/jqueryvalidator/formValidatorRegex.js" type="text/javascript" charset="UTF-8"></script>

<script type='text/javascript' src='${baseurl}dwr/engine.js'></script>
<script type='text/javascript' src='${baseurl}dwr/util.js'></script>
<script type='text/javascript' src='${baseurl}dwr/interface/dwrService.js'></script>