如何在不提交表单的情况下验证用户输入?

时间:2019-05-03 08:01:12

标签: javascript jquery smarty

我想检查用户输入字段是否输入了两位十进制数字而不提交表单。仅在从输入字段中出来时才应进行检查。如果他输入时没有小数,我想在数字上加上.00。我该如何实现?谁能帮忙吗?

示例代码在这里

<span style="font-weight:bold;">Profit Margin: </span><input type='number' step=0.01 placeholder='0.00'  id='ProfitMargin' name=profitmargin  value={$smarty.post.profitmargin}>
<span style="font-weight:bold;">%</span>

https://jsfiddle.net/rb746f3g/

4 个答案:

答案 0 :(得分:0)

您可以添加一个onchange函数。您的代码如下所示:

<input type='number' step=0.01 placeholder='0.00' id='ProfitMargin' name=profitmargin value={$smarty.post.profitmargin} onchange='myFunction()'>

在JavaScript中:

myFunction()
{
   //your code
}

答案 1 :(得分:0)

您可以使用“ onKeyUp”标签。

当您将鼠标悬停在文本框中时,这将检查文本框是否有效。

<input type='number' step=0.01 placeholder='0.00'  id='ProfitMargin' name=profitmargin  value={$smarty.post.profitmargin} onKeyUp="if((this.value).isInteger()){this.value.toFixed(2)}">

答案 2 :(得分:0)

您可以使用parseFloat.toFixed(2)方法。这里2不是。您想要的数字。

$(document).ready(function(){
   $("#ProfitMargin").on('blur',function(){
           var current=$(this);
           current.val(parseFloat(current.val()).toFixed(2))
   })
})
 


   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span style="font-weight:bold;">Profit Margin: </span><input type='number' step=0.01 placeholder='0.00'  id='ProfitMargin' name=profitmargin  value={$smarty.post.profitmargin} >
    <span style="font-weight:bold;">%</span>

答案 3 :(得分:0)

您可以使用jQuery并执行此操作。您可以添加.00,但是对于整数整数,每次将其转换回数字类型时,JS都会将其删除。

$("#ProfitMargin")
  .focusout(function() {
    var number = Number($("#ProfitMargin").val());
    alert(number);

        var isInteger = Number.isInteger(number);
    alert(isInteger);

    var floatingNumber = number;
    if(isInteger)
        floatingNumber = number + ".00";
    alert(floatingNumber);

    $("#ProfitMargin").val(floatingNumber.toFixed(2));
  });

实现此目的的最佳方法是使用文本字段类型,但是您将失去Step函数。另外,您的值{$ smarty.post.profitmargin}应该更改为文本。

因此您的代码将更改为-

    <span style="font-weight:bold;">Profit Margin: </span><input type='text' placeholder='0.00'  id='ProfitMargin' name=profitmargin >
    <span style="font-weight:bold;">%</span>

$("#ProfitMargin")
  .focusout(function() {
    var number = Number($("#ProfitMargin").val());
    alert(number);

        var isInteger = Number.isInteger(number);
    alert(isInteger);

    var floatingNumber = number;
    if(isInteger)
        floatingNumber = number + ".00";
    alert(floatingNumber);

    $("#ProfitMargin").val(floatingNumber);
  });

这是一个可行的示例-https://jsfiddle.net/s7en2amz/