Jquery 范围验证函数

Question

我的页面中有两个数字文本字段，比如 field1 和 field2。 field1 的范围在 1 到 12 之间。当 field1 的值为 1 时，才允许用户在 field2 中输入值。同样，field2 的范围在 1 到 12 之间。

我想根据field1 的值为field2 添加范围验证。无论如何我可以添加这样的 jQuery 功能。

field2: {
    range: function(){
        if($("#field1").val() == 1){
            return "[1,12]";
        }
    }
}

另外，当field1的值不为1时，如何限制用户在field2中输入任何值。

Answer 1

您可能会考虑像 Knockout 或 Angular 这样的双向绑定库，具体取决于您的实际应用程序的重量。要仅使用 vanilla Javascript 或 jQuery 来做到这一点，您需要将事件处理程序绑定到您的输入元素并根据需要修改它们的属性，例如：

$("#field1").on("input", function() {
  $("#field2").prop("disabled", this.value != 1); // or readonly
});

如果你想 post 你的 HTML 并扩展你想要它做什么，我可以 fiddle 这个。

Answer 2

如果您修复了三个小错误，您的代码应该可以正常工作...

使用.val()，而不是.val
使用return [1, 12]，而不是"return [1, 12]"
使用$('[name="field1"]')，而不是$("#field2")。您无法将字段的值与其自身进行比较。也许只是一个错别字。

jQuery:

$(document).ready(function () {

    $('#myform').validate({
        rules: {
            field1: {
                required: true
            },
            field2: {
                required: true,
                range: function () {
                    if ($('[name="field1"]').val() == 1) {
                        return [1, 12];
                    }
                }
            }
        }
    });

});

HTML:

<form id="myform">
    <input type="text" name="field1" />
    <br/>
    <input type="text" name="field2" />
    <br />
    <input type="submit" />
</form>

工作演示：http://jsfiddle.net/6000rp0b/

Jquery 范围验证函数

Jquery Range Validation function

jquery

jquery-validate