如何从页面添加、删除或交换 jQuery 验证规则？

Posted

技术标签:

【中文标题】如何从页面添加、删除或交换 jQuery 验证规则？【英文标题】：How can I add, remove, or swap jQuery validation rules from a page? 【发布时间】：2010-12-03 08:50:49 【问题描述】：

注意： 这个问题指的是jQuery.validate()（1.5版）的一个非常旧的版本。这个插件现在提供了一个内置的解决方案：应该使用.rules() method。对于需要维护无法升级到最新版本的 jQuery 和 jQuery.validate() 的旧网站的任何人，出于历史目的，我将保留此问题和答案的原始形式。

我有一个表单可以切换可见的输入元素。我想仅验证表单上的可见元素。

我很难让它正常运行。我想禁用不可见元素的验证器，但我似乎无法找出最好的方法来做到这一点。任何对我的代码或我的方法可能有问题的见解都将不胜感激。

切换可见性时，我尝试了一些方法：

调用$("form").rules("remove") 清除所有现有的验证规则。这会引发“未定义”的 javascript 异常。 为可见元素调用$("form").validation(...options...)，希望这会覆盖规则。这仅允许经过验证的第一组工作。无法验证第二个面板。 在调用新的validation() 方法之前取消绑定提交处理程序。这并没有达到我的预期。它会永久（看似）删除所有验证，并且表单会在未经验证的情况下提交。 在尝试再次调用验证器之前使用$.removeData($('form'), 'validator') 清除验证对象。这也行不通。 这是在 ASP.NET 站点中，因此使用多个 <form /> 标记是不可能的，因为这会破坏页面。

我对如何完成这项工作感到有些困惑。您可以在http://jsbin.com/ucibe3 看到我所拥有的完整工作演示，或在http://jsbin.com/ucibe3/edit 进行编辑。我试图将其简化为只是导致错误的代码。

这是我的代码的关键部分（使用上面的链接获取完整的工作页面）

html：

<td id="leftform">
    Left Form<br />
    Input 1: <input type="text" name="leftform_input1" /><br />
    Input 2: <input type="text" name="leftform_input2" /><br />
    <input type="submit" name="leftform_submit" value="Submit Left" />
</td>
<td id="rightform" style="visibility:hidden">
    Right Form<br />
    Input 1: <input type="text" name="rightform_input1" /><br />
    Input 2: <input type="text" name="rightform_input2" /><br />
    <input type="submit" name="rightform_submit" value="Submit Right" />
</td>

JavaScript：

$('#toggleSwitch').click(function() 
    if ($('#leftform').css("visibility") !== "hidden") 
        $('#leftform').css("visibility", "hidden");
        $('#rightform').css("visibility", "visible");
        $('form').validate(
            rules: 
                rightform_input1:  required: true ,
                rightform_input2:  required: true 
            ,
            messages: 
                rightform_input1: "Field is required",
                rightform_input2: "Field is required"
            
        );
     else 
        $('#rightform').css("visibility", "hidden");
        $('#leftform').css("visibility", "visible");
        $('form').validate(
            rules: 
                leftform_input1:  required: true ,
                leftform_input2:  required: true 
            ,
            messages: 
                leftform_input1: "Field is required",
                leftform_input2: "Field is required"
            
        );
    
);

【问题讨论】：

对不起，我错过了另一个答案的标记，我在我的帖子中添加了一个可能解决方案的链接-希望它有所帮助。 2014 - 现在存在几个验证器插件，虽然我可以做出有根据的猜测，但不清楚这个问题指的是哪个插件。链接字体会很有用。 @Roamer-1888 好点。我已更新问题和答案以指定插件，以及它适用的版本，因为此问题和答案指的是插件的过时版本，不再相关。 谢谢丹。 *** 在这方面是其自身成功的牺牲品。随着时间的推移，越来越多的 Qs/As 将变得过时。 【参考方案1】：

过时通知： 这个答案是指jQuery.validate() 插件（版本 1.5）的一个非常旧的版本，现在已经过时了，因为插件提供了一个官方 API 来解决这个问题。有关解决此问题的当前方法，请参阅.rules() documentation。我保留这个答案是为了帮助任何必须维护无法升级到最新版本的 jQuery 和 jQuery.validate() 的旧网站的人。

这使用了 API 中没有详细记录的验证器功能（我的意思是根本没有记录），但是由于它是验证器工作方式的基本部分，因此不太可能即使没有记录也将被删除。

一旦你初始化了 jQuery 验证器，你可以通过在你应用了验证器的表单对象上调用 validate() 方法来再次访问验证器对象。这个验证器对象有一个settings 属性，它存储了默认设置，以及你在初始化时应用的设置。

假设我像这样初始化验证器：

$('form').validate(
    rules: 
        leftform_input1:  required: true ,
        leftform_input2:  required: true 
    ,
    messages: 
        leftform_input1: "Field is required",
        leftform_input2: "Field is required"
    
);

然后我可以通过执行以下操作从验证器中获取这些确切设置：

var settings = $('form').validate().settings;

然后我可以轻松地使用此设置对象为表单添加或删除验证器。

这是删除验证规则的方式：

var settings = $('form').validate().settings;
delete settings.rules.rightform_input1;
delete settings.messages.rightform_input1;

这就是添加验证规则的方式：

var settings = $('form').validate().settings;
settings.rules.leftform_input1 = required: true;
settings.messages.leftform_input1 = "Field is required";

这是我问题中场景的有效解决方案。我使用 jQuery 的extend() 方法覆盖validate 对象的rules 和messages 属性，这就是我在两个面板之间切换的方式。

$('#toggleSwitch').click(function() 
    var settings = $('form').validate().settings;
    var leftForm = $('#leftform');
    var rightForm = $('#rightform');

    if (leftForm.css("visibility") !== "hidden") 
        leftForm.css("visibility", "hidden");
        rightForm.css("visibility", "visible");
        $.extend(settings, 
            rules: 
                rightform_input1:  required: true ,
                rightform_input2:  required: true 
            ,
            messages: 
                rightform_input1: "Field is required",
                rightform_input2: "Field is required"
            
        );
     else 
        rightForm.css("visibility", "hidden");
        leftForm.css("visibility", "visible");
        $.extend(settings, 
            rules: 
                leftform_input1:  required: true ,
                leftform_input2:  required: true 
            ,
            messages: 
                leftform_input1: "Field is required",
                leftform_input2: "Field is required"
            
        );
    
);

【讨论】：

我只是花了几个小时尝试做类似的事情，很高兴您发布了您的解决方案。我发现 rule() 方法支持添加/删除规则，但我找不到任何关于将规则和消息一起添加的信息。您使用设置对象的解决方案效果很好！谢谢！ 调用validate() 方法与仅访问$("form").data("validator").settings 相比有何优势？ @MartinSmith 如果还没有为表单创建验证器，对data(...) 的调用将返回null。多次调用validate() 没有副作用，但如果尚未创建验证器，它将为您创建一个。 使用 v1.13.0 的插件，我发现我可以直接设置规则和消息，而无需 $.extend()。我只是将规则和消息存储为对象 MyRules、MyMessages 并调用 settings.rules = MyRules;和 settings.messages = MyMessages; var 验证 = $('form').validate();然后调用validation.resetForm();在更改规则集之前清除现有错误。设置规则变成validation.settings.rules = MyRules;【参考方案2】：

如果您想使用新设置（规则、消息...等）再次调用验证 打电话

$('#formid').removeData('validator')

这将删除表单的验证，然后使用新设置再次对其进行初始化

【讨论】：

一直在寻找这个！ 这会删除表单上的所有验证吗？你如何只删除像“rightform_input1”这样添加的那些？ 删除所有规则，只删除一个检查表单附加了哪些数据，我已经很久没有使用 jQuery 了：)【参考方案3】：

validate.rules 散列中的“必需”声明不必静态声明为“true”。您实际上可以提供一个匿名函数，它可以检查某物的可见性并根据答案返回真或假。

$('form').validate(
rules: 
  rightform_input1:  
    required: function()
              return $('#leftform').css("visibility") !== "hidden"
               ,
  rightform_input2: 
    required: function()
              return $('#leftform').css("visibility") !== "hidden"
               
  
);

【讨论】：

抱歉投反对票，这是一个错误，我无法撤消它。 :( 您需要从所需的函数中返回一个值。【参考方案4】： 
$('#form_id').validate();//empty rules
//add rules/message to form element
$('#form_id #inputId').rules("add", 
    required        : true,                             
    messages        : 
        required    : 'Add your required message'
    
);

【讨论】：

【参考方案5】：

我写了一个编辑规则的小函数（只需要）。

        $.editRules = function($array, $type) 
            var settings = $('#signupForm').validate().settings;
            $.each($array, function($k, $v) 
                settings.rules[$v] = required: ($type == 'add' ? true : false);
            );
        ;

【讨论】：

【参考方案6】：

虽然还有其他方法可以做到这一点，但 ASP.net 确实允许您使用多个表单标签，只要它们没有全部呈现 - 所以如果您使用多视图仅显示相关内容，您可以使用多个表单。

它倾向于清理验证和提交处理。

另外，jquery 确实允许将 :visible 添加到您的选择器中，因此您可能只在可见元素上运行选择器，并根据它们的隐藏方式回避问题。

:visible 的计算方式在 jQuery 1.3.2 中发生了变化。如果元素及其父元素占用文档中的空间，则元素假定为可见。不考虑 CSS 可见性。发行说明更详细地概述了这些变化。

这是另一个关于堆栈溢出的帖子的更好/更简单的解决方案-

显然，验证插件允许您在规则中指定 :visible。这是帖子-

Advanced JQuery Validation: Avoiding Validations on Certain Conditions

【讨论】：

我会考虑使用您提到的多个表单标签，但是除了验证之外，页面是完整的并且页面中有很多内容，因此需要对页面进行大量重组此解决方案有效。

以上是关于如何从页面添加、删除或交换 jQuery 验证规则？的主要内容，如果未能解决你的问题，请参考以下文章

如何从表单中删除 jQuery 验证？

如何使用 jquery 验证插件动态添加验证规则

jquery validate 动态增加删除验证规则（转载）

Jquery在添加规则时验证抛出错误

将 jQuery 验证规则添加到动态生成的表单元素时出错

jQuery - 如何将验证相同的输入名称添加到规则方法中？ [复制]