Question

我确定有更好的方法来实现这一点，但无法弄明白。我有一个表格，顶部有2个字段，总是需要的。然后，我有一系列选项卡，在选中时加载到不同的字段中（加载单独的HTML块，以便在表单提交时仅提交当前在DOM中的内容）。我正在使用jquery验证插件（http://docs.jquery.com/Plugins/Validation），它允许您在每组新字段加载时将验证规则/消息设置为对象，以删除冗余规则并添加新规则作为字段更改。问题是规则/消息对象都必须写入js以便在需要时使用，并且文件很长并且看起来非常低效。这是我的伪代码：

<form>
    <input1 (always on page) />
    <input2 (always on page) />
    <ul id="nav-tabs">
        <li id="tab1"></li>
        <li id="tab2"></li>
        <li id="tab3"></li>
    </ul>
    <div id="dynamic-content">
        <!-- different form fields load in here from separate html files, all requiring different rules in addition to the 2 fields always on the page -->
    </div>
    <input type="submit" />
</form>

我认为可能有一些解决方案，在规则中加载每个HTML块，因为它已经设置好了？有人做过这样的事吗？

感谢任何可以提供帮助的人。 T

Answer 1

使用内置的rules()方法添加规则。 See documentation.

注意：必须在致电.validate()之后调用此方法。

jsFiddle DEMO

$("#form").validate({ // my other options }); // the following method must come AFTER .validate() $(".myClass").each(function() { $(this).rules('add', { required: true, minlength: 5 }); });

以下内容与自定义messages:结合使用。请注意，格式与在.validate() ...
中添加规则作为选项时略有不同
$(".myClass").each(function() { $(this).rules('add', { required: true, minlength: 5, messages: { required: "Required input", minlength: jQuery.format("At least {0} characters are necessary") } }); });

当您向表单动态添加字段时，此方法也非常有用。

var myRule = { required: true, minlength: 5, messages: { required: "Required input", minlength: jQuery.format("At least {0} characters are necessary") } } $("#myform").append('<input type="text" name="four" /><br />'); $("[name='four']").rules('add', myRule);

jsFiddle演示：

http://jsfiddle.net/kSFKE/10/

如果您动态销毁不需要的字段输入，则无需使用remove删除规则。

Answer 2

还有一个rules()方法，其中包含用于动态规则更改的add和remove子方法

http://docs.jquery.com/Plugins/Validation/rules#.22add.22rules

示例（来自docs）：

$("#myinput").rules("add", {
 minlength: 2
});

许多人也没有意识到这些领域课程的简单性。

对于在规则对象中使用布尔值的直接规则，用作类的相同规则名称将自动注册该字段。对于您创建的任何方法也是如此。

您还可以考虑使用data-属性来帮助修改添加/删除元素时的规则。可以遍历新元素或旧元素，并使用data-属性解析为rules()方法

Answer 3

如果只是简单的验证，您只需使用每个class上的input属性进行验证即可。

<强> HTML

<input type="text" name="input1" class="required" />

<强>的Javascript

$("#Form").validate();

<强> Demo

Answer 4

有人询问如何动态应用规则;

    <?php
    $form_rules = array(
    'user_login' => array(
    'required' => true,
    'minlength' => 4)
    );
    ?>

然后在页面的头部

    <script>
        $(document).ready(function() {
            $('#portal_reg').validate({ // form id 
                'rules': <?php echo json_encode($form_rules); ?>
            });
        });
    </script>

动态设置jQuery验证插件的规则/消息对象

4 个答案: