JQuery ajax提交表单及表单验证
博客分类：jsp/html/javascript/ajax/development Kit开源项目注：经过验证，formValidator只适合一个页面不超过一个表单的情况。
本例实现功能：通过ajax提交表单，并在提交表单前对表单的数据进行验证。
主要通过两个插件实现：
第一个：
jQuery Form Plugin
/form 主要功能是ajax提交表单
第二个：jQuery formValidator 国产强大的表单验证插件。
/wzmaodong
最简单的例子如下：
Html代码<html><head><title>Form</title><!--引入jQuery--><scriptsrc="<?phpechobase_url()?>style/jquery.js"type="text/javascript"></script><!--引入jQueryformValidator--><linktype="text/css"rel="stylesheet"href="<?phpechobase_url()?>style/form_valide/style/validator.css"></link><scriptsrc="<?phpechobase_url()?>style/form_valide/formValidator.js"type="text/javascript"charset="UTF-8"></script><scriptsrc="<?phpechobase_url()?>style/form_valide/formValidatorRegex.js"type="text/javascript"charset="UTF-8"></script><!--引入jQueryFormPlugin--><scripttype="text/javascript"src="<?phpechobase_url()?>style/ajax_form/jquery.form.js"></script><scripttype="text/javascript">$(document).ready(function(){ //提供回调函数，提供提交返回结果的处理 varoptions={ success:function(data){ alert(data); }}; //初始化验证插件，如果提交出错，则弹出对话框，如果正确，则通过ajax提交表单请求。 $.formValidator.initConfig({ formid:"form1", onerror:function(msg){alert(msg)}, onsuccess:function(){$('#form1').ajaxSubmit(options);returnfalse;} }); //表单验证 $("#test1").formValidator({ onshow:"请输入用户名,只有输入\"maodong\"才是对的", onfocus:"用户名至少6个字符,最多10个字符", oncorrect:"该用户名可以注册"}) .inputValidator({min:6,max:10,onerror:"你输入的用户名非法,请确认"}) .regexValidator({regexp:"username",datatype:"enum",onerror:"用户名格式不正确"}); });</script></head><body><formaction="<?phpechosite_url("welcome/post")?>"method="post"name="form1"id="form1"><tdalign="right">用户名:</td><td><inputtype="text"name="test1"id="test1"style="width:120px"value="maodong"/></td><td><divid="test1Tip"style="width:250px"></div></td><inputtype="submit"name="button"id="button"value="提交"/></form></body></html>
success回调函数不执行，可能是请求时候 出错了。调用success方法之前尝试着把服务器返回的数据解析成dataType格式，试一下 error:function(XMLResponse){alert(XMLResponse.responseText)}。
如：
var options={
target:'#output1',//把服务器返回内容放入id为output1的元素中
beforeSubmit:showRequest,//提交前的回调函数
success:showResponse,//提交后的回调函数
error:function(XMLResponse){alert(XMLResponse.responseText)},
//url:url,//默认是form的action,如果申明，则会覆盖
//type:type,//默认是form的method('get' or 'post'),如果申明，则会覆盖
//dateType:null,//'xml','script',or 'json'(接受服务端返回的类型)
//clearForm:true,//成功提交后，清除所有表单元素的值
//resetForm:true,//成功提交后，重置所有表单的值
//timeout:3000//限制请求的时间，当请求大于3秒后，跳出请求
}
ajaxForm 和 ajaxSubmit 的选项
除了以下列出的选项，你也可以给这两个函数传递标准$.ajax的选项。
target ———— 指定页面中的哪些元素用于响应服务器端的更新。这个值可以是jQuery查询字符串，或者它指定的jQuery对象，或者是DOM元素。默认值：null
replaceTarget ———— 配合target选项使用。当被设置为true时，target指定的部分将被替换，否则只替换它的内容。默认值：false
url ———— 指定数据要提交到的URL。默认值：表单的action属性值
type ———— 指定表单提交的方式：’GET’或者’POST’。默认值：表单的method属性值（若无则为’GET’）
data ———— 要同表单一起提交的额外数据，格式：data: { key1: ‘value1′, key2: ‘value2′ }
dataType ———— 服务器响应的数据类型，值可以为：null, ‘xml’, ‘script’, 或者’json’。这个选项指定服务器端的响应如何处理。它直接映射到了jQuery.httpData方法。如果dataType为’xml’，则服务 器的响应将被看成是XML，’success’回调函数将被传入responseXML的值。如果dataType为’json’，则服务器的响应将被看 成是JSON对象（通过eval），并传给’success’回调函数。如果dataType为’script’，则服务器的响应将被eval成全局上下 文。默认值：null
beforeSerialize ———— 表单序列化前的回调函数。它提供了一个机会以在值被获取前控制表单。其中的一个参数是表单的jQuery对象，另一个是传给ajaxForm/ajaxSubmit的选项对象。默认值：null
beforeSerialize: function($form, options) {
// 返回false将取消提交操作
}
beforeSubmit ———— 表单提交前的回调函数。一般用于处理表单提交前的逻辑，如验证表单数据。如果这个回调函数返回false，提交操作将被取消。它的三个参数分别是表单数据 组成的数组，表单的jQuery对象，传给ajaxForm/ajaxSubmit的选项对象。默认值：null
beforeSubmit: function(arr, $form, options) {
// 第一个参数的格式：
// [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
// 返回false将取消提交操作
}
success ———— 表单被成功提交后，服务器端产生响应时的回调函数。它将被传入以下参数：
1. responseText 或者 responseXML 的值（取决于dataType选项的值）
2. statusText
3. xhr(XMLHttpRequest对象)（若jQuery的版本小于1.4，则为jQuery封装过的表单元素）
4. jQuery封装过的表单元素（若jQuery的版本小于1.4，则为undefined）
默认值：null
semantic ————— 指定提交的数据是否遵循语义上的顺序（较正常方式慢）。注意一般情况下表单的序列化都遵循语义上的顺序，除非有image类型的控件。只有当服务器对提交 的数据的语义上的顺序有严格要求而且表单含有image类型的控件时才设置为true。默认值：false
resetForm ———— 当成功提交时是否重置表单。默认值：null
clearForm ———— 当成功提交时是否清除表单。默认值：null
iframe ———— 是否总是将服务器的响应放在iframe里面。默认值：false
iframeSrc ———— 如果iframe选项为true，则要添加到iframe中的src属性。默认值：about:blank，使用https协议的页面的默认值为：javascript:false
forceSync ———— 指定是否在上传文件或者使用iframe选项提交表单时去除短时间的延迟。这个延迟用于浏览器在进行原始的提交操作前渲染DOM。通过它给用户提示如”请稍候”，这改善了可用性。默认值：false
选项示例：
// 准备选项对象
var options = {
target: '#divToUpdate',
url: 'comment.php',
success: function() {
alert('Thanks for your comment!');
}
};
// 把选项对象传递给ajaxForm函数
$('#myForm').ajaxForm(options);
