Javascript keyup函数抛出错误的警报消息

Question

使用以下脚本，我试图验证退款金额wlt_ln_refund_amt是否大于使用keyup功能的余额wlt_ln_bal。

• 在我的html只读字段wlt_ln_bal(字段类型=数字)我有一个金额222.00
• 其他字段wlt_ln_refund_amt(字段类型= number)

testcase

• 对于值3，系统抛出错误消息，如"退款金额Rs.3大于余额Rs.222"。
• 对于值1、2或2000，系统不会抛出任何错误

下面是我的html代码:

<form id="lnrefund" name="lnrefund" 
    method="post" role="form" 
    class="form-horizontal" 
    action="<?php echo $_SERVER['PHP_SELF']; ?>" 
    onsubmit="return (checkform() && confirm_update())">    
   <div class="form-group">
     <label class="col-md-2 col-xs-12 control-label">Loan Balance</label>
     <div class="col-md-3 col-xs-12">       
       <input id="wlt_ln_bal" Name="wlt_ln_bal" 
        type="number"value ="<?php echo $bal ?>" 
        class="form-control required" readonly/>
       <span class="help-block">Required</span>
     </div>
   </div>
   <label class="col-md-2 col-xs-12 control-label">Refund Amount</label>
   <div class="col-md-3 col-xs-12">
    <input id="wlt_ln_refund_amt" 
           Name="wlt_ln_refund_amt"type="number" step="0.01" 
           class="form-control" required/>
    <span class="help-block">Required</span>
   </div>
</form>

这是javascript

<script type="text/javascript">
$(function(){
    $("#wlt_ln_refund_amt").keyup(function () {
var ref = document.lnrefund.wlt_ln_refund_amt.value;
var bal = document.lnrefund.wlt_ln_bal.value;
if (ref>bal)
    { 
     alert('Refund amount Rs.'+ref+  'nis greater than Available Balance Rs.'+bal)
          return true;
          }
      });
      });
</script>

Answer 1

看起来变量被比较为字符串(即按字母顺序)，你应该尝试像

        var ref = parseInt(document.lnrefund.wlt_ln_refund_amt.value);
        var bal = parseInt(document.lnrefund.wlt_ln_bal.value);

或者

        var ref = parseFloat(document.lnrefund.wlt_ln_refund_amt.value);
        var bal = parseFloat(document.lnrefund.wlt_ln_bal.value);

如果你想要小数

Answer 2

既然你问了建议…: P

我将使用jQuery获取两个输入的值。您已经为文档准备函数使用了jQuery，那么为什么不使用:

var $refund = $('#wlt_ln_refund_amt'),
    $balance = $('#wlt_ln_bal.value');

你所做的工作很好-只要你的HTML结构永远不会改变。使用这样的jQuery意味着您不必担心将输入包装在包含DIV或稍后将表单更改为弹出式对话框中的问题。

接下来，我不会使用keyup事件，我会使用blur事件。也许您的用例需要在每次击键后进行检查，但这通常会惹恼用户。如果你绑定的是模糊而不是按键，你的用户就有机会在输入时纠正错误，而不是被你的功能骂。

$refund.on('blur', function(){
    var refAmount = parseInt($refund.val()),
        balAmount = $balance.val() * 1;
        if (refAmount > balAmount)
        { 
            alert('Refund amount Rs.' +
                  refAmount +  
                  'nis greater than Available Balance Rs.' +
                  balAmount);
            $refund.focus();
        }
});

就像其他人建议的那样，确保你比较的值是数值。您可以按照建议使用parseInt(首选方式)或通过将值乘以1来强制类型转换。如果用户输入的不是数字，那么这两种方法都会得到NaN(不是数字)。

在提醒之后，我会将焦点返回到退款金额，让用户再次查看条目。

作为最后的建议，我建议使用可读的变量名。也许你只是为了这个问题而缩短了它们，但是描述性变量名比晦涩的缩写更容易处理。

祝你好运!