我正在使用 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文件,并且不在页面加载时执行,而只能通过调用函数来执行。)
最佳答案
使用 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 :
关于javascript - jQuery/JavaScript 比较最大值和最小值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17114901/