如何使用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: 必须输入合法的xyk号

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

})

}

}

$(document).ready(function(){

$('#pwd').blur(function() {

var password = $('#pwd').val()//通过id获取你输入的密码值

$.ajax({

type:'post',

url:'checkpass.php',//URL

data:{pass:password},

dataType:'json',

success:function(return) {

if(return.status == 1) {

alert('输入密码和数据库中的密码一致！')

} else {

alert(''输入密码错误！)

}

}

})

})

})

<?php

$password = $_POST['pass']

$arr = array()

//通过连接数据库，在把$password当做条件，看查询的结果。有值就返回true

if(return) {

$arr['status'] = 1

} else {

$arr['status'] =0

}

echo json_encode($arr)

?>

---