jquery validation 在触发按钮单击事件进行表单校验和验证通过后发起ajax请求的解决方案

本文介绍了一个使用jQuery实现的表单验证功能,包括对产品标题、商品卖点及商品分类的验证规则与错误提示信息。同时,文章还展示了如何在验证通过后利用Ajax向服务器发送POST请求来完成商品信息的添加。

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



//声明一个函数
function validform() {
	return $("#form-article-add").validate({
		rules : {
			title : {
				required : true,
				minlength : 5,
				maxlength : 50
			},
			sellpoint : {
				required : true,
				maxlength : 200
			},
			category : {
				required : true
			}

		},
		messages : {
			title : {
				required : "产品标题不能为空",
				minlength : "请输入5-50个字符的产品标题",
				maxlength : "请输入5-50个字符的产品标题"
			},
			sellpoint : {
				required : "商品卖点不能为空",
				maxlength : "卖点信息不能超过200个字符"
			},
			category : {
				required : "请选择商品分类"
			}
		}
	});
}
//注册表单验证
$(validform());
//点击表单提交按钮触发单击事件,进行表单验证,验证通过发起ajax请求,验证不通过在表单里提示
$("#subBtn").click(function() {
	
	if (validform().form()) {
		$.ajax({
			type : "POST",
			url : "/restful/page/product",
			data : $("#form-article-add").serialize(),
			success : function(msg) {
				layer.msg('新增商品成功!', {
					icon : 1,
					time : 1000
				});
			},
			error : function() {
				layer.msg('新增商品失败!', {
					icon : 2,
					time : 1000
				});
			}
		});
	} else {
	}
});

//文档加载完成后也进行表单校验,上面仅仅在单击事件触发后才进行
//如果是普通的表单提交,直接在文档加载完成后进行表单校验就可以了
$(function() {
	validform();
});




评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值