0

我正在使用 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 文件，而不是在页面加载时执行，而只能通过调用函数来执行。）

4

2 回答 2

5

使用 jQuery on 函数委托检查，以便它在输入中的值更改时进行检查。

$('#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

最后是小提琴：

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

于 2013-06-14T18:23:50.520 回答
1

这完全建立在 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);
});

要重用脚本，您只需要创建两个inputs 并给它们一个匹配data-range且适当data-aspect的 s。我将获取自定义警报消息的任务留给了 OP。

小提琴

于 2013-06-14T18:56:38.220 回答