jQuery验证小于答案

【问题标题】：jQuery validate less thanjQuery验证小于
【发布时间】：2009-08-11 15:09:19
【问题描述】：

我正在尝试为 jQuery 编写一个 Less than 验证器。

我想比较一个文本框和另一个文本框，所以如果我有：

<input type="text" id="value1" /> <input type="text" id="value2" />

我希望我的validator 看起来像

$('#myForm').validate({rules: { value1: { lessThan: "#value2" } } });

我已经尝试过了，但我无法让它工作：

$.validator.addMethod('lessThan', function(value, element, param) {
    var i = parseInt(value);
    var j = parseInt($(param).val());
    return i >= j;
}, "Less Than");

另一个问题是我应该把代码放在哪里？在$(document).ready 中还是在<script> 标签中？

【问题讨论】：

标签： jquery jquery-validate

【解决方案1】：

我是个白痴。我在我的实际代码中做了一些错字，我弄乱了我在很多验证器方法中看到的 this.optional(element)。这是工作函数：

$.validator.addMethod('lessThanEqual', function(value, element, param) {
    if (this.optional(element)) return true;
    var i = parseInt(value);
    var j = parseInt($(param).val());
    return i <= j;
}, "The value {0} must be less than {1}");

这是精简版

$.validator.addMethod('lessThanEqual', function(value, element, param) {
    return this.optional(element) || parseInt(value) <= parseInt($(param).val());
}, "The value {0} must be less than {1}");

现在我需要弄清楚当我更改字段 2 时如何重新运行字段 1 的验证。

【讨论】：

【解决方案2】：

我认为您无需实际编写自己的验证器方法即可做到这一点。

$('#myForm').validate({
    rules: {
         value1: {
             maxlength: $('#value2').val().length
         }
    }
});

$('#value2').change(function() {
    $('#value1').rules('remove', 'maxlength').rules('add', {
         maxlength: $('#value2').val().length
    });
});

没有代码重复甚至更好

function getRule() {
    return {
        maxlength: $('#value2').val().length
    };
}

$('#myForm').validate({
    rules: {
         value1: getRule()
    }
});

$('#value2').change(function() {
    $('#value1').rules('remove', 'maxlength').rules('add', getRule());
});

【讨论】：

谢谢。这确实有效，但我设法让我的验证器方法工作。不过，你是启发我的人。

【解决方案3】：

您可以在任何文档就绪块中插入您的验证方法，如下所示。

$().ready(function() {

    $.validator.addMethod("lessThan",
        function(value, element, param) {
            var i = parseFloat(value);
            var j = parseFloat(param);
            return (i < j) ? true : false;
        }
    );

});

我尽量保持简单，以便您可以修改它。如果该方法被称为“lessThan”，那么它应该这样做。如果您的方法实际上执行“小于或等于”，请考虑使用更合适的名称。

请注意，我也在使用 parseFloat，这使得该方法比 parseInt 更灵活。

在您的验证器中，您正确使用了它；所以为了验证说，小于 10：

$('#myForm').validate({ rules: { value1: { lessThan: "10"}} });

祝你好运！

【讨论】：

你为什么要使用这样的三元运算符？您的退货声明等同于 return (i < j); 甚至 return i < j;，恕我直言，这更容易看。

【解决方案4】：

考虑 (A) 是您希望其值小于 (#B) 输入的输入名称。在确定两个输入的类型后，此代码与我一起使用：type="number"

$("#form").validate({
    rules: {
        A: {
            lessThan: "#B"
        }
    }
});

【讨论】：

请不要只用源代码回答。尝试对您的解决方案如何工作提供一个很好的描述。见：How do I write a good answer?。谢谢

【解决方案5】：

我认为最好使用 HTML max 属性。

<input type="number" placeholder="Marks" required name="marks" max="100">

验证将是请输入一个小于或等于 100 的值。您也可以将最大值更改为 99，仅小于 100 的值。

【讨论】：