jquery validate 插件使用小结

最新推荐文章于 2025-11-20 16:38:36 发布

原创最新推荐文章于 2025-11-20 16:38:36 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #插件 #validate

前端 html jquery插件专栏收录该内容

3 篇文章

订阅专栏

本文探讨了一个在项目中使用jQueryvalidate插件进行表单验证时遇到的困惑，发现验证失效的原因在于AJAX提交与默认验证事件不匹配。通过调整验证触发方式，最终解决问题并分享了解决方案。

项目中整合了jquery validate插件，仿照别人的使用写了我的表单验证，结果不起作用。然后就各种找原因。

在网上下了jquery validate插件的完整包，看了看里边的例子，跟我的使用貌似没什么差别。

后来才想起来，以前在这个项目某个功能中使用validate插件的时候，貌似有过类似的问题，一时又想不起来问题出在哪。然后就回去找原来的代码看。

恍然大悟，例子中的表单验证是普通的表单提交，而我的表单提交是jquery ajax提交。想起来validate默认的验证触发事件是表单的submit事件。那么这应该是问题所在。

然后按照ajax提交调用validate验证的方式修改了我的表单验证。表单的验证代码如下（ajax方式提交表单）

$("#sendForm").validate({
           submitHandler : function(form) {
               $(form).find(':submit').attr('disabled', true);
               preSubmit();
               $.ajax({
                   url           : "file_send_submit.jspx",
                   type       : "post",
                   dataType   : "json",
                   data       : $("#sendForm").serialize(),
                   success       : function(msg) {
                       if(msg.success=='true') {
                           alert("提交成功！");
                           afterSubmit(true);
                       } else {
                           alert("提交失败！");
                           afterSubmit(false);
                       }
                   },
                   error       : function() {
                       alert("提交出错！");
                       afterSubmit(false);
                   }
               });
           }
       });

这段验证代码是按照之前的成功例子修改的。但是表单依然不验证。

不解。

折腾了老半天，问题总算找到了，<input class="edit_input w_332" maxlength="100" type="text" name="sendName" id="sendName" class="required“/>，这是我原来的输入框写法，然后改成了<input class="edit_input w_332 required" maxlength="100" type="text" name="sendName" id="sendName"/>，输入框变成了必须输入，验证生效。这算是一个不规范的写法引起的吧，泪奔啊，让我闹心了那么久。