AJAX提交方式如何使用jQuery的validate进行表单验证
程序员文章站
2022-03-08 19:27:57
...
1、首先引入js文件：
jquery.js
jquery.validate.js
二者缺一不可
2、代码演示：
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
</head>
<body>
<form id="form">
<input name="userName" type="text" />
<input type="radio" value="1" name="state" />开放
<input type="radio" value="0" name="state" />已截止
<input onclick="excute()" type="button" value="提交" />
<!-- 点击事件:直接调用自定义方法（先表单验证，验证通过再执行AJAX方法） -->
</form>
</body>
</html>
<script>
//2、执行表验证方法，验证通过：执行AJAX进行前后端通信
function excute(){
//调用.form()方法来真正执行表单验证。
if(validateForm().form()){
$.ajax({
// 获取表单数据
//执行ajax方法
//省略...
});
}
}
//1、定义表单验证的方法，返回表单验证结果：true或false
//（此处并不执行表单验证，只是定义一个有返回值的方法）
function validateForm() {
return $("#form").validate({
rules: {
userName: {required: true},
state: {required: true},
},
messages: {
userName: {required: "用户名为必填项"},
state: {required: "请选择状态"},
}
});
}
</script>
注意：
1、form表单内的提交按钮不能定义为type=submit，只能定义为type=button，（type=image也不行）。否则点击提交按钮后，不但以AJAX方式提交，from表单还会自动以表单方式进行二次“非正确”请求提交。由于AJAX为异步提交，虽然最终能请求成功，但是并不能获得服务器的正确响应结果；
2、如果表单内不使用input的 type=button标签作为按钮，而是直接使用button标签，那么也要加上type=button，因为form表单内的按钮默认type=submit；
总之一句话：form表单内的触发按钮一定要是type=button的！！！