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

解释一下,首先validation 在验证完毕后并不支持直接绑定按钮进行提交表单的方法。

解决方法:
1.创建一个方法使其返回 一个的aidation 验证的事件

function validateT1(){
			
			return $("#updateempsfrom").validate({
			    //定义验证规则
				rules: {
					empName: {//元素的name属性
						required: true,
						minlength: 2,
						maxlength: 24
					},
					empEmail: {
						required: true,
						email: true
					}
				},
				//定义错误提示信息
				messages: {
					empName: {
						required: "请输入用户名",
						minlength: "用户名至少需填写{0}个字符",
						maxlength: "用户名最多填写{0}个字符"
					},
					empEmail: {
						required: "请输入Email",
						email: "Email格式不正确"
					}
				}
			});
		};

2.然后我们执行调用该方法,让他进行验证

//激活方法使其运行
		validateT1();

3.最后单击按钮提交表单

//点击表单提交按钮触发单击事件,进行表单验证,验证通过发起ajax请求,验证不通过在表单里提示 
		$("#emp_update_btn").click(function(){
			
			//判断validateT1方法返回的是true还是false true:表示全部通过 、false:表示未通过验证
			if(validateT1().form()){
				$.ajax({
					url : "${APP_PATH }/updateEmp/"+$(this).attr("emp_id"),
					type : "PUT", //result富风格
					data : $("#updateempsfrom").serialize(),
					success : function(result) {

						if (result.code == 100) {
							$("#update_emp_modal").modal('hide');
							toPage(pageNum);
						} else {
							alert("修改失败!");
						}

					}

				});	
			}
	
		});

最后附上默认的验证规则:

序号规则描述
1required:true必须输入的字段。
2remote:“check.php”使用 ajax 方法调用 check.php 验证输入值。
3email:true必须输入正确格式的电子邮件。
4url:true必须输入正确格式的网址。
5date:true必须输入正确格式的日期。日期校验 ie6 出错,慎用。
6dateISO:true必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
7number:true必须输入合法的数字(负数,小数)。
8digits:true必须输入整数。
9creditcard:必须输入合法的信用卡号。
10equalTo:"#field"输入值必须和 #field 相同。
11accept:输入拥有合法后缀名的字符串(上传文件的后缀)。
12maxlength:5输入长度最多是 5 的字符串(汉字算一个字符)。
13minlength:10输入长度最小是 10 的字符串(汉字算一个字符)。
14rangelength:[5,10]输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。
15range:[5,10]输入值必须介于 5 和 10 之间。
16max:5输入值不能大于 5。
17min:10输入值不能小于 10。

最后感谢一下大佬的文章的支持:
https://www.cnblogs.com/jingmin/p/6294982.html
https://blog.csdn.net/qq_33624952/article/details/82346874

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码神附体

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值