jquery.validate清除表单的验证结果

最新推荐文章于 2023-06-01 11:37:00 发布

原创最新推荐文章于 2023-06-01 11:37:00 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #js #bug

解决方案同时被 2 个专栏收录

81 篇文章

订阅专栏

jQuery

29 篇文章

订阅专栏

本文探讨了如何使用jQuery.validate库时遇到的表单验证结果清除问题。通过深入分析，我们了解到Validator对象的resetForm()函数能帮助清空之前验证状态，并提供了相关代码示例。

文章目录

发现bug：

jquery.validate无法清除同表单的上次验证结果，如下：
在这里插入图片描述

分析bug：

查阅官方文档之后，观察validate的返回类型,可以发现validate 方法返回一个 Validator 对象。

名称	返回类型	描述
validate(options)	Validator	验证所选的Form

Validator 对象有很多方法可以用来引发校验程序或者改变 form 的内容，下面列出几个常用的方法。

名称	返回类型	描述
form()	Boolean	验证form返回成功还是失败
element(element)	Boolean	验证单个元素是成功还是失败
resetForm()	undefined	把前面验证的Form恢复到验证前的状态
showErrors(errors)	undefined	显示特定的错误信息

我们可以利用上面的resetForm()函数清空上次表单的验证结果

解决bug：

var validate='';
  function vform(dom,func) {
            validate=$('#'+dom).validate({
               rules: {
                   snoAllocation: {
                       required: true
                   },
                   statusAllocation1:{
                       equalTo:'#statusAllocation'
                   },
                   "dormInfo.id":{
                       required:true
                   }
               },
               messages:{
                    snoAllocation:{
                       required:'请选择要分配的学生'
                   },
                   statusAllocation1:{
                        equalTo:'该宿舍已住满'
                   },
                   "dormInfo.id":{
                        required:'请选择院系'
                   }
               },
               submitHandler:function () {
                   func();
               }
            });
            //下面这句代码加在你代码合适的地方，不一定非要放在这里
           validate.resetForm();
        }