来自http://blog.163.com/zhi_qingfang@126/blog/static/11747756320125268035680/
有些功能需要我们利用Ajax技术进行POST提交表单，这时候就需要用到jquery.Form ,它有两种方式进行提交， AjaxForm和AjaxSubmit方式。
AjaxForm 方式必须先绑定表单，它一般在$(document).ready(function () {}里定义，它能让表单不刷新页面的情况下POST到目标。 如： $(document).ready(function () { $("#UpdateForm").ajaxForm(function(){ Alert(“AjaxForm提交完成”) }); }AjaxSubmit方式是以相应事件来通过Ajax方式提交表单，比如单击某个按钮触发该表单的提交
如：
$(“#btnTest”).click(function(){ $("#UpdateForm").AjaxSubmit (function(){ Alert(“AjaxForm提交完成”) }); }) 一、参数说明 1)BeforeSubmitBeforeSubmit参数用来在表单提交到Server之前 验证其数据的合法性，如果提交之前执行的回调函数返回False,表单的提交将会终止。
2)Success Success参数表单提交完成之后执行 二、API接口说明 1) FormSerialize 将表单序列化成查询串。这个方法将返回一个形如： name1=value1&name2=value2的字符串。 如： var queryString = $('# myFormId).formSerialize(); 等效于var queryString = $.param(formData)方法 这两个方法返回的值是相同的 2) fieldSerialize 将表单里的元素序列化成字符串。当你只需要将表单的部分元素序列化时可以用到这个方法。这个方法将返回一个形如： name1=value1&name2=value2的字符串。 var queryString = $('#myFormId .specialFields').fieldSerialize(); specialFields是该元素的Class值 3) fieldValue 取出所有匹配要求的域的值，以数组形式返回。从 0.91 版本开始, 这个方法始终返回一个数组。如果没有符合条件的域，这个数组将会是个空数组，否则它将会包含至少一个值。 var value = $('# myFormId':password').fieldValue(); alert('The password is: ' + value[0]); 4) resetForm 通过调用表单元素的内在的DOM 上的方法把表单重置成最初的状态。 $('#myFormId').resetForm(); 5) clearForm 清空表单所有元素的值。这个方法将会清空所有的文本框，密码框，文本域里的值，去掉下拉列表所有被选中的项，让所有复选框和单选框里被选中的项不再选中。 $('#myFormId').clearForm(); 6) clearFields 清空某个表单域的值。这个可以用在只需要清空表单里部分元素的值的情况。 $('#myFormId .specialFields').clearFields(); specialFields是该元素的Class值 三、Server端返回格式处理 1)Json格式在设置返回Json格式时，要设置Option中DataType格式如下
dataType: 'json', JS验证成功到Server端代码： if (ModelState.IsValid) { return Json(new { a = "a", b = "b" }); }Form提交完成之后success方法将被执行，responseText 和 responseXML 的值会被传进这个参数 (这个要依赖于dataType的类型)
success: function (responseText, statusText, xhr, $form) { alert(responseText.a); } 2)XML格式在设置返回XML格式时，要设置Option中DataType格式如下
dataType: 'xml', JS验证成功到Server端代码： //返回一个XML类型 string xmlString = "<?xml version=\"1.0\" encoding=\"gb2312\" ?><tree id=\"0\"><item text=\"北京欢迎你\"/></tree>"; return this.Content(xmlString, "text/xml");Form提交完成之后success方法将被执行
success: function (responseText, statusText, xhr, $form) { alert(xhr.responseText) } 3)HTML格式在设置返回HTML格式时，要设置Option中DataType格式如下
dataType: ‘HTML’, JS验证成功到Server端代码： string htmlString = "<div style=\"background:red\">Test<div>"; return Content(htmlString);Form提交完成之后success方法将被执行
success: function (responseText, statusText, xhr, $form) { alert(responseText) }jquery.validate 使用
一、使用Jquery.Validate进行验证方法 $(document).ready(function () { $("#pageForm").validate({ rules: { DictKey: { required: true, maxlength: 10 }, DictContent: { required: true, maxlength: 10 } }, messages: { DictKey: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符") }, DictContent: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符") } }, submitHandler: function (form) { form.submit(); } }) })
DictKey ，DictContent：指需要验证的控件ID
submitHandler ：指通过验证后运行的函数，里面写入表单要提交的函数，否则表单不会提交
二、列出常用默认验证规则
(1)required:true 必输字段(2)email:true 必须输入正确格式的电子邮件(3)url:true 必须输入正确格式的网址(4)date:true 必须输入正确格式的日期(5)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性(6)number:true 必须输入合法的数字(负数，小数)(7)digits:true 必须输入整数(8)creditcard: 必须输入合法的信用卡号(9)equalTo:"#field" 输入值必须和#field相同(10)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）(11)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)(12)minlength:10 输入长度最小是10的字符串(汉字算一个字符)(13)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(14)equalLength:10 输入长度必须是10(14)range:[5,10] 输入值必须介于 5 和 10 之间(15)max:5 输入值不能大于5(16)min:10 输入值不能小于10
三、使用ajax方法验证输入值是否存在 当文本框输入值时，或改变输入值时会自动到Server去验证输入值是否在数据库中存在 JS代码如下： DictKey: { required: true, maxlength: 10, remote: { //验证用户名是否存在 type: "POST", url: '@Url.Content("~/Account/Test/")' //servlet } }, DictKey: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符"),remote:"用户名已被注册"},
Server端：
[HttpPost] public JsonResult Test(string DictKey) //DictKey即要验证控件的ID值 { bool result; if (DictKey == "a") { result = true; } else { result = false; } return Json(result); }根据Server端返回的True,False来决定验证是否通过
四、非submit按钮结合Jquery.Form进行提交
如果不是submit提交按钮，比如单击某个按钮触发表单验证，这时表单验证可用如下方式
function validateForm() {
//validate方法参数可选
return $("#form1").validate({
rules: {
},
messages:{
}
}).form();
}
function doSubmit(){
//do other things
//验证通过后提交
if(validateForm()){
form.submit()
//这边可以结合Jquery.Form进行AjaxSubmit方式异步提交
$("#UpdateForm").AjaxSubmit (function(){ Alert(“AjaxForm提交完成”) });}
}
转载于:https://www.cnblogs.com/eterwei/p/3651902.html
