jQuery 验证 : compare two fields

Question

我想检查一个字段中输入的值是否小于另一字段中输入的值。

HTML:

<form id="bid_form_id">
    <input type="text" name="bid_price" id="bid_price_id" value="">
    <input type="text" name="bid_auto_decrement" id="bid_auto_decrement_id" value="">
</form>

jQuery:

<script>

    jQuery(document).ready(function ($) {

        $.validator.addMethod('le', function (value, element, param) {
            return this.optional(element) || value <= $(param).val();
        }, 'Invalid value');


        $('#bid_form_id').validate({
            errorElement: "small",
            rules: {
                bid_price:
                        {
                            required: true,
                            number: true

                        },
                bid_auto_decrement:
                        {
                            required: true,
                            number: true,
                            le: '#bid_price_id'
                        }
            },
            messages: {
                bid_auto_derement: {le: 'Must be less than bid price.'}
            }

        });
    });


</script>

“bid_auto_decrement”值应小于“bid_price”值。该脚本首次运行。如果我在第二个字段中输入较大的值，它会显示“无效值”，但之后如果我输入正确的值，它仍然会显示错误。

Answer 1

The script works for the first time. If I enter larger value in 2nd field, it shows 'invalid value' but after that if I enter correct values, it still shows error.

这是因为您的自定义规则是在 bid_auto_decrement 上声明的，这意味着您的自定义规则仅由 bid_auto_decrement 字段上的事件触发。

由于您希望在 bid_price 的值发生更改时重新触发对 bid_auto_decrement 字段的验证，因此您需要一个事件处理程序来以编程方式触发验证bid_auto_decrement 字段。

$('[name="bid_price"]').on('change blur keyup', function() {
    $('[name="bid_auto_decrement"]').valid(); // <- trigger a validation test
});

工作演示:http://jsfiddle.net/o7vgejsk/

注意:您还将 messages 对象中的字段名称拼写为 bid_auto_derement，因此您的自定义消息被忽略。

在对这些字段的值进行计算或进行任何数学运算时，您还需要使用 parseInt()，否则它们将被视为字符串。

$.validator.addMethod('le', function (value, element, param) {
    return this.optional(element) || parseInt(value) <= parseInt($(param).val());
}, 'Invalid value');