jQuery验证：比较两个字段

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

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>

jQuery（文档）.ready（函数（$）{
$.validator.addMethod（'le'，函数（值、元素、参数）{
返回此值。可选（元素）| |值可以使用：

$(function() {
    //Catch the forms submit event.
    $("FORM#bid_form_id").on("change", function(evt) {
        //Setup variables
        var valid = false;
        var max = $("#bid_price_id", this);
        var cur = $("#bid_auto_decrement_id", this);

        //Is the bid valid?
        valid = (parseInt(max.val()) > 0 && parseInt(max.val()) > parseInt(cur.val()) ? true : false);

        //If the bid is not valid...
        if ( !valid ) {
            //Stop the form from submitting
            evt.preventDefault();
            //Provide an error message (sorry for te use of alert!)
            alert("Oops!\n\nPlease make sure your bid is smaller than the previous.");
            //Focus on our textbox
            $("#bid_auto_decrement_id").focus();
        }

        //If the form is valid, it will submit as normal.
    });
});

虽然我知道这不是使用jQuery验证器，但它显示了比较两个可预测值的基本原理

我希望这有帮助。我还没有运行此代码

该脚本第一次工作。如果我在第二个字段中输入较大的值，它将显示“无效值”，但在这之后，如果我输入正确的值，它仍然显示错误

这是因为您的自定义规则在
bid\u auto\u decrement
上声明，这意味着您的自定义规则仅由
bid\u auto\u decrement
字段上的事件触发

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

由于每当
bid\u price
的值更改时，您希望在
bid\u auto\u decrement
字段上重新触发验证，因此您需要一个事件处理程序，以编程方式触发
bid\u auto\u decrement
字段上的验证

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

下面是添加自定义JQuery验证的示例代码

这将验证最大输入，最大输入将始终大于最小输入

  <form id="menuItemTagsDetailsForm">

<div class="col-xs-12" id="item_tag_content_panel">
  <div class="form-group col-md-4">
    <label class="control-label" for="minimum_selection_for_bash_dish">* Minimum Selections</label>
            <input type="number" class="form-control valid" id="minimum_selection_for_bash_dish" name="minimum_selection_for_bash_dish" required="" data-rule-required="true" aria-required="true" aria-invalid="false">
    <label id="minimum_selection_for_bash_dish-error" class="error" for="minimum_selection_for_bash_dish" style="display: none;"></label>
  </div>
  <div class="form-group col-md-4">
    <label class="control-label" for="max_selection_for_bash_dish">* Maximum Selections</label>
            <input type="number" class="form-control error" id="max_selection_for_bash_dish" name="max_selection_for_bash_dish" required="" data-rule-required="true" aria-required="true" aria-invalid="true">
    <label id="minimum_selection_for_bash_dish-error" class="error" for="minimum_selection_for_bash_dish" style="display: none;"></label>
  </div>

  <div class="form-group col-md-4">
    <div class="form-group text-right">
        <button class="btn btn-success btn-sm" type="submit" name="saveTagsSubmit" value="saveTagsSubmit"><i class="glyphicon glyphicon-save"></i><span class="hidden-xs">&nbsp;Save</span></button>
    </div>
  </div>

</div>

</form>

这确实有帮助，尽管在这些字段中输入任何内容之前它会发出警报。正如您所承认的，这个答案与jQuery验证插件完全无关。谢谢。它可以工作。但是有一个奇怪的问题。不确定为什么。验证检查值的第一位数字。尝试这个-第一个值：100，第二个值：10（工作）.1st值：100，2nd值：20（不起作用）有什么建议吗？@ShyamKadam，这是自定义方法函数中的一个问题。使用这些字段的值进行计算或计算时，需要使用
parseInt（）
，否则，它们将被视为字符串。请参阅我的更新答案。
$.validator.addMethod('greaterThan', function (value, element, param) {
return this.optional(element) || parseInt(value) >= parseInt($(param).val());
}, 'Invalid value');
$("#menuItemTagsDetailsForm").validate({

     rules: {
       minimum_selection_for_bash_dish: {
           required: true,
           number: true

       },
       max_selection_for_bash_dish: {
           required: true,
           number: true,
           greaterThan: '#minimum_selection_for_bash_dish'
       }
   },
   messages: {
       max_selection_for_bash_dish: {
           greaterThan: 'Maximum selections is always geater then or equal to minimum selections.'
       }
   }
});