Ajax表单验证失败后，阻止表单提交（jQuery）

最新推荐文章于 2022-11-09 09:28:52 发布

原创

最新推荐文章于 2022-11-09 09:28:52 发布 · 置顶 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍了如何使用jQuery的Ajax进行表单验证。在验证失败时，阻止表单的直接提交。首先，HTML界面需给表单定义id，确保提交按钮type属性不为submit。Ajax验证代码中，设置url为服务器验证地址，成功后在回调函数中处理表单提交。

Ajax表单验证失败后，阻止表单提交（jQuery）

HTML界面

'<form action="/WangYiYun/PhoneLogin" id="login_form" class="phone_login_form">' + 
	'<input type="text" id="phone" placeholder="请输入手机号" required="required" pattern="1[3|5|7|8][0-9]{9}"/>'+
	'<input type="password" id="password" placeholder="请输入密码" required="required" />'+
	'<p id="phoneDiv"></p>'+
	'<input type="button" id="phone_login_button" value="登&nbsp;&nbsp;&nbsp;&nbsp;录">'+
'</form>';

首先，要给表单form标签定义id，方便jQuery找到表单元素，里面的提交按钮属性type一定不能为submit。
action是表单提交的地址

jQuery Ajax验证代码

$.ajax({
				"url" : url,//提交的URL路径
				"type" : "GET",//提交的方式
				"data" : keyValue,//提交到服务器的数据
				"dataType" : "text",//指定返回数据类型
				"async" : true,
				"success" : callBack,//响应成功后执行代码
				"error" : function(){//响应失败执行代码
					alert("账号验证出错！");
					return false;
				}
			});
			//响应成功时的回调函数