Question

我正在使用jQuery来比较两个输入字段的值。一个是“最大”值，一个是“最小”值。验证的目的是检查最小值是否大于最大值。

我的逻辑几乎正常，但有一个小bug。它由onBlur事件触发（在其中一个测试字段上），一旦显示弹出警报，用户可以在任何其他位置单击，并且测试不再运行（因此允许最小值大于最大值）

这是jQuery：

//Function to validate if maximum benefit value is more the minimum benefit value
function minMaxValues(){
    var maxAmt = ($('#maxAmount').val());
    var minAmt = ($('#minAmount').val());
    if ((minAmt != '') && (maxAmt != '') && (maxAmt < minAmt)){
        alert('The maximum benefit amount must be larger than the minimum amount.');
        return false;
    } else {
        return true;
    } //end maxAmt minAmt comparison
}//end minMaxValues function

HTML：

<label>Maximum Benefit Amount:</label>
    <input type="text" name="benefit_max_amount" value="" onBlur="minMaxValues();" id="maxAmount">
<label>Minimum Benefit Amount</label>
    <input type="text" name="benefit_min_amount" value="" onBlur="minMaxValues();" id="minAmount">

如何让jQuery查看页面 all 时间并比较值，以便在没有警报（警告）的情况下条件永远不会为真？

编辑：我应该声明我正在寻找模块化的东西，以便它可以在其他位置使用（从而允许它进入外部js文件，而不是在页面加载时执行，但只能通过调用函数。）

Answer 1

使用jQuery在函数上委托检查，以便在输入值发生变化时检查。

$('#container').on('change', 'input[name="benefit_max_amount"], input[name="benefit_min_amount"]', function(){
  return minMaxValues();
});

container是用于演示目的的元素，但您应该使用包含页面上输入元素的元素。

你的html不需要包含任何onblur事件

<label>Maximum Benefit Amount:</label>
<input type="text" name="benefit_max_amount" value="" id="maxAmount">

<label>Minimum Benefit Amount</label>
<input type="text" name="benefit_min_amount" value="" id="minAmount">

您的JavaScript函数（在注释中提到的更改以解析整数值）

function minMaxValues(){

    var maxAmt = ($('#maxAmount').val());
    var minAmt = ($('#minAmount').val());

    if ((minAmt != '') && (maxAmt != '')){
      try{
        maxAmt = parseInt(maxAmt);
        minAmt = parseInt(minAmt);

        if(maxAmt < minAmt) {
          alert('The maximum benefit amount must be larger than the minimum amount.');
          return false;
        }
      }catch(e){
        return false;
      }
    } //end maxAmt minAmt comparison

    return true;

}//end minMaxValues function

最后小提琴：

http://jsfiddle.net/x3kYs/3/

Answer 2

这完全建立在Nagarjun的答案之上，但由于OP特别要求提供更可重用的解决方案，请考虑一下......

这样改变html：

<div id="container">
    <label for="maxAmount">Maximum Benefit Amount:</label>
    <input name="benefit_max_amount" id="maxAmount" data-range="benefit" data-aspect="max">
    <label for="minAmount">Minimum Benefit Amount</label>
    <input name="benefit_min_amount" id="minAmount" data-range="benefit" data-aspect="min">
</div>

我为每个data添加了两个input个属性。一个将它们分组为范围对（data-range），另一个用于区分哪个（data-aspect）。

然后你可以添加这个javascript并在任何你喜欢的地方运行它，它只会影响具有上述元素的页面：

function validate_range() {
    var range = $(this).data("range");
    var min = + $("input[data-range=" + range + "][data-aspect=min]").val();
    var max = + $("input[data-range=" + range + "][data-aspect=max]").val();

    if (min && max && min > max) {
        alert("Invalid Range");
    }
}

$(function () {
    $("#container").on("change", "input[data-range]", validate_range);
});

要重复使用该脚本，您只需创建两个input并为其提供匹配的data-range和相应的data-aspect。我离开了通过OP获取自定义警报消息的任务。

Fiddle

jQuery / JavaScript来比较最大值和最小值

2 个答案: