Question

我正在使用jQuery Validation来验证表单，而我想要做的就是这样......我想要设置它，以便检查复选框，而不是以不同的方式验证编辑框。

如果未选中该复选框，则应如何验证：

weight: { required: true, max: 50 }

如果选中它，应该如何验证。

weight: { required: true, max: 100 }

有什么想法吗？

Answer 1

每当点击该复选框时，您都会使用Validate plugin's built-in rules('add') method动态更改规则。

<强>的jQuery ：

$(document).ready(function () {

    // initialize the plugin
    $('#myform').validate({ 
        // other options,
        rules: {
            // other rules,
            weight: {
                required: true,
                max: 50 // initial value on load
            }
        }
    });

    // change the rule on checkbox and update displayed message dynamically
    $('#check').on('change', function () {
        if ($(this).is(':checked')) {
            $('#weight').rules('add', {
                max: 100
            });
        } else {
            $('#weight').rules('add', {
                max: 50
            });
        };
        $('#weight.error').each(function () {
            $(this).valid();
        });
    });

});

<强> HTML ：

<form id="myform">
    <input type="checkbox" id="check" />
    <input type="text" id="weight" name="weight" />
    <input type="submit" />
</form>

工作演示：http://jsfiddle.net/3hGxS/

Answer 2

使用max方法和函数作为参数制定规则。在验证字段时，即在字段上调用element（）时，将对此进行评估。

规则定义如下所示

rules: {
    field1:
    {
        required: true,
        max: function () { return $("#mycheckbox:checked").length ? 100 : 50; }
    }
}

此外，在规则更改时重新验证目标字段，或者您可能会收到不再适用的错误消息

$('#mycheckbox').on('change', function () {
    $('#field1.error').each(function () {
        $(this).valid();
    });
});

请注意，这只会重新验证字段（如果已经过验证），并检查是否存在默认的errorClass“错误”。

使用像这样的HTML

<input name="mycheckbox" id="mycheckbox" type="checkbox" />
<input name="field1" id="field1">
<input type="submit" />

完整的JavaScript代码是这样的，find the fiddle here

$(function () {

   $("form").validate({
        rules: {
          field1:
          {
            required: true,
            max: function () {
                    return $("#mycheckbox:checked").length ? 100 : 50;
                }
            }
         },
        submitHandler: function () {
            alert('form ok');
        }
    });

    $('#mycheckbox').on('change', function () {
        $('#field1.error').each(function () {
            $(this).valid();
        });
    });

});

选中复选框时动态更改jQuery Validate规则

2 个答案: