结论: 用普通按钮做 ajax 提交更为合适!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>自定义验证</title>
<script src="jqValidate/jquery.min.js" type="text/javascript"></script>
<script src="jqValidate/jquery.metadata.js" type="text/javascript"></script>
<script src="jqValidate/jquery.validate.js" type="text/javascript"></script>
<script src="jqValidate/jquery.validate.messages_cn.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#signupForm").validate({
onkeyup: true,
rules: {
zipcode:{
required: true,
isZipCode: true
}
},
messages: {
zipcode: {
required: "请填写邮编",
isZipCode: "邮编不正确"
}
},
submitHandler: function(form) {
//alert('要提交了!');
//1. 不可用 $(form).submit();否则会死循环
//2. 如果 form.submit()也不用,此表单就不会自动提交了
//form.submit();
//3. 下面是 ajax 提交
ajaxSubmit();
}
});
// 邮政编码验证
$.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");
});
//ajax 提交
function ajaxSubmit(){
if( $("#signupForm").valid() ){
$.post("submit.ashx", function(data){
alert(data.result);
}, "json");
}
}
</script>
</head>
<body>
<form id="signupForm" method="get" action="">
<p>
<label for="firstname">
请输入邮编: </label>
<input id="zipcode" name="zipcode" />
</p>
<p>
<input class="submit" type="submit" value="Submit" />
<input class="button" type="button" οnclick="ajaxSubmit()" value="普通button的ajax提交" />
</p>
</form>
</body>
</html>