jquery.validate改用ajax提交前验证

最新推荐文章于 2021-08-05 12:16:56 发布

xiaxiaxia_tian

最新推荐文章于 2021-08-05 12:16:56 发布

阅读量378

点赞数

CC 4.0 BY-SA版权

分类专栏：表单验证

本文链接：https://blog.youkuaiyun.com/xiaxiaxia_tian/article/details/84570754

表单验证专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何结合jQuery Validate插件进行表单验证，并通过AJAX方式提交数据，实现网页交互优化。示例代码展示了如何设置验证规则、错误提示及AJAX调用流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery.validate默认验证方式为submit时，有时候需要用ajax提交表单，完整代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8"> 
</head>
<body>
<form id="form">
	<div>
		<input type="text" name="name">
	</div>
	<button id="submit-btn">保存</button>
</form>
</body>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script type="text/javascript">
	$(function () {
		function validateName() {
			return $("#form").validate({
				rules:{
					name:{
						required: true
					}
				},
				message:{
					name:{
						required: '这是必填字段'
					}			
				},
				errorPlacement: function(error, element) {
					error.appendTo(element.parent())
				}
			}).form();
		};
		$("#submit-btn").on("click",function () {
			if( validateName() ) {
				// ajax提交
			}
		})
	})
</script>
</html>