JQuery方式验证表单和AJAX提交

一、使用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提交完成”)
                 }); 
    }    
 
}