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的字符串。

如：

                     var queryString = $('# myFormId).formSerialize();

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

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

 注意：formSerialize()与serialize()的区别。

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提交完成”)

                 }); 

    }    

}