jquery.validate手动调用校验,方便ajax请求
jquery.validate是一个非常方便的前端校验插件,在submit提交时会自动校验,并给出提示,如果校验不通过,则阻止提交。但是如果需要ajax方式进行后台请求,则需要手动调用validate进行校验判断,具体方式如下:
代码块(依赖jquery框架)
1.初始化校验:
$(function () {
//表单校验,queryForm为表单id
$('#queryForm').validate({
errorElement:"em",
errorClass:"red",
rules: {
userName: {required: true}//userName为input框id
},
messages: {
companyId: {
required: "请输入用户名称"
}
}
});
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
2.调用方式,调用valid()方法
校验通过则返回true,不通过则false:
//提交方法
function pageSubmit() {
if (! $("#queryForm").valid()) {
return;
}
var data = $("#queryForm").serializeArray();
$.ajax({
url: "test.html",
data: data,
success: function(html){
$("#result").append(html);
}
3.html代码示例
<form id="queryForm">
<input type="text" name="userName" id="userName"/>
<button type="button" id="btn-query" onclick="pageSubmit()">提交</button>
</form>
- 1
- 2
- 3
- 4
通过上述方式则可以灵活控制校验的位置。
附上插件下载地址http://download.csdn.net/download/hanfei0000cool/9679278