jQuery validation 在触发按钮单击事件进行表单校验和验证通过后发起ajax请求的解决方案
2019-07-28 17:04
288 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43064399/article/details/97616587
解释一下,首先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("修改失败!"); } } }); } });
最后附上默认的验证规则:
序号 | 规则 | 描述 |
---|---|---|
1 | required:true | 必须输入的字段。 |
2 | remote:“check.php” | 使用 ajax 方法调用 check.php 验证输入值。 |
3 | email:true | 必须输入正确格式的电子邮件。 |
4 | url:true | 必须输入正确格式的网址。 |
5 | date:true | 必须输入正确格式的日期。日期校验 ie6 出错,慎用。 |
6 | dateISO:true | 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。 |
7 | number:true | 必须输入合法的数字(负数,小数)。 |
8 | digits:true | 必须输入整数。 |
9 | creditcard: | 必须输入合法的信用卡号。 |
10 | equalTo:"#field" | 输入值必须和 #field 相同。 |
11 | accept: | 输入拥有合法后缀名的字符串(上传文件的后缀)。 |
12 | maxlength:5 | 输入长度最多是 5 的字符串(汉字算一个字符)。 |
13 | minlength:10 | 输入长度最小是 10 的字符串(汉字算一个字符)。 |
14 | rangelength:[5,10] | 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。 |
15 | range:[5,10] | 输入值必须介于 5 和 10 之间。 |
16 | max:5 | 输入值不能大于 5。 |
17 | min:10 | 输入值不能小于 10。 |
最后感谢一下大佬的文章的支持:
https://www.cnblogs.com/jingmin/p/6294982.html
https://blog.csdn.net/qq_33624952/article/details/82346874
相关文章推荐
- jquery validation 在触发按钮单击事件进行表单校验和验证通过后发起ajax请求的解决方案
- 当一个表单中有多个按钮时,可以通过onclick()事件触发不同的action请求
- liferay中使用jQuery Validation Engine进行ajax验证,不通过也提交表单的解决方案
- JSP中在提交表单之前,发送ajax请求进行js的验证
- javaweb当中通过点击一个按钮来触发事件进行制定页面的跳转操作
- vue 表单验证按钮事件交由父组件触发的方法
- 服务器 按钮 通过js验证 再 触发 提交 事件
- 通过ajax和json进行表单验证(异步加载)
- 通过Ajax方式提交form表单上传文件,使用FormData进行Ajax请求
- 服务器按钮如何通过js验证再触发提交事件?
- 通过配置http拦截器,来进行ajax请求验证用户登录的页面跳转
- 使用jquery.validate.min.js插件进行表单验证并自定义校验规则
- form表单提交前通过jq验证(ajax特别说明,return true失效)
- 刷新或关闭浏览器触发事件,且单击按钮实现跳转的同时不执行关闭事件
- Yii框架zii.widgets.grid自定义按钮,ajax触发事件并提示
- Android的Button按钮,ACTION_UP事件不触发解决方案
- Https请求握手验证方式,对相应域名进行认证通过
- js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
- Android 一个按钮两次单击触发两个不同事件并实现两个View在同一界面切换
- 原生js实现表单的正则验证,所有验证都通过后提交按钮才可用