Question

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

Html：

$ echo "" > /var/lib/mongodb/mongod.lock

jQuery的：

$ mongod

'bid_auto_decrement'值应小于'bid_price'值。该脚本是第一次使用。如果我在第二个字段中输入较大的值，则显示“无效值”，但在此之后如果输入正确的值，则仍显示错误。

Answer 1

该脚本首次运行。如果我在第二个字段中输入较大的值，则会显示“无效值”＆＃39;但之后如果我输入正确的值，它仍会显示错误。

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

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

bid_auto_decrement

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

注意：您还错误地将$('[name="bid_price"]').on('change blur keyup', function() { $('[name="bid_auto_decrement"]').valid(); // <- trigger a validation test });对象中的字段名称拼错为messages，因此您的自定义消息被忽略了。

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

parseInt()

Answer 2

您可以使用：

$(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验证器，但它显示了比较两个可预测值的基本原理。

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

Answer 3

这是添加自定义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>

将自定义规则添加到您现有的验证库中

$.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.'
       }
   }
});

jQuery Validate：比较两个字段

3 个答案: