Question

使用以下脚本，我尝试使用键盘功能验证退款金额<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="one" id="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>是否大于余额wlt_ln_refund_amt。

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

测试用例

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

这是我的HTML代码：

wlt_ln_refund_amt

这是javascript

<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>

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

在提醒之后，我会将焦点恢复到退款金额，以便为用户提供另一次拍摄。

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

祝你好运！

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

2 个答案: