你是不是刚用jQuery Validate插件做表单验证，结果点击提交按钮后页面突然卡死？鼠标转圈圈就是停不下来？别慌，这问题我刚开始用的时候也遇到过，当时差点把键盘摔了。今天咱们就掰开了揉碎了讲讲这个让人抓狂的死循环问题。
先说个最常见的翻车现场：你在submitHandler里直接用了form.submit()对吧？比如这样写的： javascript $(“#myForm”).validate({ submitHandler: function(form) { form.submit(); // 就是这行搞事情 } }); 然后发现每次提交表单，页面就像吃了炫迈根本停不下来。为啥呢？因为当form.submit()执行的时候，它又会触发validate插件的验证流程，验证通过又进submitHandler，然后再次提交…无限套娃就这么开始了。
要解决这个死循环，咱们得先明白几个关键点。第一，浏览器原生的表单提交和插件控制的提交是两码事。第二，submitHandler本质上是个拦截器，它接管了原本的表单提交动作。第三，在这个函数里直接调用提交方法，相当于自己挖坑自己跳。
这里有个重要知识点：浏览器自带的form.submit()方法会绕过前端验证。但是jQuery Validate插件已经劫持了提交事件，所以这时候再用form.submit()就相当于绕过了插件的安全防护，直接触发原始提交动作，结果就是验证流程又被激活，形成死循环。
那正确的姿势应该是啥？这里给出三个解决方案：
方案一：改用ajax提交 javascript submitHandler: function(form) { $.ajax({ url: form.action, type: form.method, data: $(form).serialize(), success: function(response) { // 处理成功后的逻辑 } }); return false; // 这个很重要！ } 方案二：禁用二次验证 javascript submitHandler: function(form) { $(form).off(“submit”); // 先解除事件绑定 form.submit(); } 方案三：原生方式提交 javascript submitHandler: function(form) { form.submit(function(){ return false; // 阻断后续提交 }); form.get(0).submit(); // 调用原生DOM方法 }
可能有同学要问：”为啥用ajax提交就能避免死循环？” 这是因为ajax请求不会触发浏览器的页面刷新，自然也就不会重新初始化表单验证流程。但千万记得要加return false，这个就像汽车的刹车踏板，能阻止默认的提交行为继续执行。
再来说几个新手常踩的坑。有的同学在submitHandler里既调用了ajax又用了form.submit()，这就相当于同时踩油门和刹车。还有人忘记阻止默认事件，像这样： javascript submitHandler: function(form, event) { // 忘记event.preventDefault() form.submit(); } 这个event参数其实是被插件处理过的，如果要用原生事件对象，得在初始化时配置。
最后说个高级技巧：如果你确实需要重新提交表单，可以在提交完成后解除验证绑定。比如： javascript submitHandler: function(form) { $(form).submit(function(){ $(this).validate().destroy(); return true; }); } 这样在第一次提交后就会销毁验证实例，避免后续操作触发验证流程。
小编亲测最稳妥的方案还是用ajax提交，既不会破坏用户体验，又能完全掌控提交流程。下次再遇到页面卡死的情况，先检查submitHandler里是不是直接用了form.submit()，然后对照这几个解决方案挨个试试。编程嘛，不就是不断踩坑填坑的过程，多掉几次坑就成老司机了。
免责声明：网所有文字、图片、视频、音频等资料均来自互联网，不代表本站赞同其观点，内容仅提供用户参考，若因此产生任何纠纷，本站概不负责，如有侵权联系本站删除！邮箱:207985384@qq.com https://www.ainiseo.com/hosting/34846.html
