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请求。
//----------------------------------------------------------------------------------------------------
// [作者网名] 猫冬
// [邮    箱] [email protected]
// [作者博客] 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>

jQuery的ajax的form提交方法应用,布布扣,bubuko.com