javascript - jQuery/JavaScript 比较最大值和最小值

Question

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

我的逻辑几乎可以工作，但有一个小错误。它由 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始终查看页面并比较值，以便在没有警报(警告)的情况下条件永远不会为真？

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

Answer 1

使用 jQuery 对函数进行委托(delegate)检查，以便每当输入中的值发生更改时它都会进行检查。

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

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

并且您的 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

最后是 fiddle :

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