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

【问题标题】：How to validate a user input without form submission?如何在不提交表单的情况下验证用户输入？
【发布时间】：2019-09-21 17:59:49
【问题描述】：

如果他在没有提交表单的情况下输入了 2 个十进制数字，我想检查用户输入字段。当只是从输入字段中出来时，应该进行检查。如果他输入时没有小数，我想在数字上加上 .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/

【问题讨论】：

请在提问前做一些研究。此问题已在此网站上多次询问和回答

标签： javascript jquery smarty

【解决方案1】：

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

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

在 JavaScript 中：

myFunction()
{
   //your code
}

【讨论】：

【解决方案2】：

您可以使用“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)}">

【讨论】：

【解决方案3】：

您可以使用 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>

【讨论】：

【解决方案4】：

您可以使用 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/

【讨论】：