对于表单提交,这儿我就不多说,相信大家会来这儿,想必对基本的表单提交都会了。但如果是要对表单进行验证,而且是异步提交。在官方的文档里没有很明确的说明,当然,在官方的文档里也会有说,只是官方的文档说的实在是太太专业了,对于小冰这样的菜鸟并不能完全体会。在小冰的百度之下,终于找到了解决的方法。不多说,直接上代码。
注:本文属于转载,请作者见谅代码,代码会跟作者有有所不同,但原理还是一样的。
<form class="cForm" id="cForm" method="post" action="">
<p><label for="user">名字</label><input id="name" name="user" required minlength="3"></p>
<p><label for="keyword">关键词</label><input id="password" type="password" maxlength="12" name="password">
</p><p><input class="submit" type="submit" value="登录"></p>
</form>
$(function(){
$('#form').validate({
onsubmit:true,// 是否在提交是验证
onfocusout:false,// 是否在获取焦点时验证
onkeyup :false,// 是否在敲击键盘时验证
rules:{
name:{
required:true,
minlength:2
},
keyword:{
required:true,
},
},
messages:{
name:{
required:'请输入网站名字',
minlength:'网站名字不能少于2位'
},
keyword:{
required:'请输入关键词',
}
},
errorElement:"b",
showErrors: function(errorMap, errorList) {
for (var element in errorMap) {
$("#" + element).next("em").removeClass();
//去除success样式和字体图标,不去除会跟错误信息一起出现
}
this.defaultShowErrors();
//默认的错误信息显示样式
},
submitHandler:function(form){
$.ajax({
url:url,
type:'post',
data:data,
dataType:'json',
success:function(res){
console.log(res);
}
})
},
invalidHandler: function(form, validator) {return false;}
})
})