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

Question

使用以下脚本，我尝试使用 keyup 函数验证退款金额 wlt_ln_refund_amt 是否大于余额 wlt_ln_bal。

在我的 html 只读字段 wlt_ln_bal（字段类型 = 数字）中，我有一个金额 222.00
其他字段wlt_ln_refund_amt（字段类型=数字）

测试用例

对于值 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 事件。也许您的用例需要在每次击键后进行检查，但这通常会惹恼用户。如果您绑定到 blur 而不是 keyup，您的用户将有机会在输入期间更正错误，然后再被您的函数大喊大叫。

$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（不是数字）。

警报后，我会return将注意力放回到退款金额上，让用户再次尝试进入。

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

祝你好运！

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

Javascript keyup function throwing wrong alert message

javascript

html

keyup