Jquery.Form和jquery.validate 的使用

有些功能需要我们利用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)BeforeSubmit

BeforeSubmit参数用来在表单提交到Server之前验证其数据的合法性，如果提交之前执行的回调函数返回False,表单的提交将会终止。

2)Success

Success参数表单提交完成之后执行

二、API接口说明

1)FormSerialize

将表单序列化成查询串。这个方法将返回一个形如：name1=value1&name2=value2的字符串。

如：

varqueryString=$('#myFormId).formSerialize();

等效于varqueryString=$.param(formData)方法

这两个方法返回的值是相同的

2)fieldSerialize

将表单里的元素序列化成字符串。当你只需要将表单的部分元素序列化时可以用到这个方法。这个方法将返回一个形如：name1=value1&name2=value2的字符串。

varqueryString=$('#myFormId.specialFields').fieldSerialize();

specialFields是该元素的Class值

3)fieldValue

取出所有匹配要求的域的值，以数组形式返回。从0.91版本开始,这个方法始终返回一个数组。如果没有符合条件的域，这个数组将会是个空数组，否则它将会包含至少一个值。

varvalue=$('#myFormId':password').fieldValue();

alert('Thepasswordis:'+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)

{

returnJson(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类型

stringxmlString="<?xmlversion=\"1.0\"encoding=\"gb2312\"?><treeid=\"0\"><itemtext=\"北京欢迎你\"/></tree>";

returnthis.Content(xmlString,"text/xml");

Form提交完成之后success方法将被执行

success:function(responseText,statusText,xhr,$form){

alert(xhr.responseText)

}

3)HTML格式

在设置返回HTML格式时，要设置Option中DataType格式如下

dataType:‘HTML’,

JS验证成功到Server端代码：

stringhtmlString="<divstyle=\"background:red\">Test<div>";

returnContent(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]

publicJsonResultTest(stringDictKey)//DictKey即要验证控件的ID值

{

boolresult;

if(DictKey=="a")

{

result=true;

}

else

{

result=false;

}

returnJson(result);

}

根据Server端返回的True,False来决定验证是否通过

四、非submit按钮结合Jquery.Form进行提交

如果不是submit提交按钮，比如单击某个按钮触发表单验证，这时表单验证可用如下方式

functionvalidateForm(){

//validate方法参数可选

return$("#form1").validate({

rules:{

},

messages:{

}

}).form();

}

functiondoSubmit(){

//dootherthings

//验证通过后提交

if(validateForm()){

form.submit()

//这边可以结合Jquery.Form进行AjaxSubmit方式异步提交

$("#UpdateForm").AjaxSubmit(function(){

Alert(“AjaxForm提交完成”)

});

}

}