在 jQuery 中，如何添加小数位数的值？

Posted 2023-05-09

【中文标题】在 jQuery 中，如何添加小数位数的值？

【英文标题】：In jQuery how do I add a value for number of decimal places?

【发布时间】：2021-01-02 09:00:06

【问题描述】：

我正在检查有效输入并成功检查了空白输入，但是如何使用 jquery 检查小数位的有效长度？

 if ($val === "")

这对于空白值很好，但是找到不超过 2 位小数的输入的正确语法是什么？

这是目前为止的代码，浏览器现在正在恢复到本机浏览器弹出窗口，以在输入时发出警告。

$(document).ready(function() 
  $("#submitCalculation").click(function() 
    $(".checkVelocity").each(function() 
      $val = $(this).val();
      if ($val === "") 
        if ($val.split(".")[1] || "").length > 2) 
        $(this).popover(
          placement: "left",
           content: '<textarea class="popover-textarea"></textarea>',
          template: '<div class="popover"><div class="arrow"></div>'+
              '<div class="row"><div class="col-3 my-auto"><i class="fas fa-exclamation-triangle" id="invalid-input3">'+
              '</i></div><div class="popover-content col-9">Enter the velocity of the car between 10 and 300 ms<sup>-1</sup>, kmh<sup>-1</sup> or mph.'+
              '</div></div>' 
        );
        $(this).popover('show');
      
    )
  )
)

最初它适用于空白或不正确的非数字输入：

$(document).ready(function() 
  $("#submitCalculation").click(function() 
    $(".checkVelocity").each(function() 
      $val = $(this).val();
      if ($val === "")        
        $(this).popover(
          placement: "left",
           content: '<textarea class="popover-textarea"></textarea>',
          template: '<div class="popover"><div class="arrow"></div>'+
              '<div class="row"><div class="col-3 my-auto"><i class="fas fa-exclamation-triangle" id="invalid-input3">'+
              '</i></div><div class="popover-content col-9">Enter the velocity of the car between 10 and 300 ms<sup>-1</sup>, kmh<sup>-1</sup> or mph.'+
              '</div></div>' 
        );
        $(this).popover('show');
      
    )
  )
)

但它不适用于小数位数超过 2 的情况。

【问题讨论】：

对不起，我在问题中犯了一个错误，意思是说不超过2 dp。所以我不介意 2、2.2 或 2.21，但不介意 2.201（尾随零在 jquery 中并不重要，因此它们无论如何都不算​​数，你可以写 2.00000000000000000 但它只会读为 2。

【参考方案1】：

要检查小数位，请拆分句点并获取数组中第二个元素的长度。由于问题已明确表示也应接受类似 2.000 或 2.210000000 的内容，因此您可以将 .parseFloat() 和 .toString() 与 .length 结合使用，以允许通过 2.0000000 或 2.22000000 等字符串：

if($val !== "" && $val.indexOf('.') > -1)
   //We have decimal places, use combination of 
   //parseFloat toString length
   //parseFloat will remove trailing zeroes.
   const decimalLength = (parseFloat($val).toString().split('.')[1] || "").length;
    
   //This doesn't work as it will block on trailing zeroes, ie. 2.000000 or 2.0100000
   //const decimalLength = $val.split('.')[1].length;

   if(decimalLength > 2) 
       //Do something
   

或者您可以采用 T.J. 建议的更精简的方法。克劳德：

if (($val.split(".")[1] || "").length > 2)  /* Disallow that many decimal places */ 

【讨论】：

或者只是：if (($val.split(".")[1] || "").length > 2) /* Disallow that many decimal places */

@T.J.Crowder 有趣。我认为尝试在空字符串上拆分并对失败的拆分进行索引会引发异常，而不是产生未定义。我将您的建议放在了答案中，并将其归功于您。谢谢。

感谢您，试一试。

@T.J.Crowder 谢谢。我在控制台中对其进行了测试。我只是不知道它是这样评价的。我很欣赏你的小提琴和洞察力。我会把那个归档以备将来使用。

@PaulDavis 然后在上面的原始代码中将这一行 if ($val === "") 替换为：if ($val === "" || ($val.split(".")[1] || "").length > 2) ，也请与 T.J.因为他可能已经指出了另一种情况，这不能解释，例如“2.000”失败。

【参考方案2】：

您说过应该允许尾随零，而之前的答案不允许（他们会拒绝"2.000"）。 （到目前为止，您并不清楚您是否想这样做。:-)）

我想我倾向于使用正则表达式方法：

const rex = /^\s*(?:\d+|0)(?:\.\d0,20*)?\s*$/;
const valid = rex.test($val);

现场示例：

const rex = /^\s*(?:\d+|0)(?:\.\d0,20*)?\s*$/;
function test($val, expect) 
  const valid = rex.test($val);
  const validmsg = valid ? "valid" : "INVALID";
  const success = !valid === !expect;
  console.log(`$JSON.stringify($val): $validmsg $success ? "OK" : "<=== ERROR"`);

// Good ones
test("2", true);
test("2.1", true);
test("2.12", true);
test("2.120", true);
test("2.120000", true); // Trailing zeros okay
// Bad ones
test("", false);
test("2.123", false);
test("2.120001", false);

正则表达式/^\s*(?:\d+|0)(?:\.\d0,20*)?\s*$/ 表示：

^ - 字符串开头 \s* - 允许零个或多个空白字符（您可能希望将其省略并先修剪字符串） (?:\d+|0) - 一个非捕获组，定义了一个 alternation（多个选择），它将匹配 \d+（一个或多个数字）或 0（字面意思） (?:\.\d0,20*) - 一个非捕获组定义 \. - 文字 . 表示小数位 \d0,2 - 零、一位或两位数 0* - 任意数量的 0 字符 ? - 使其前面的整个非捕获组可选，以防根本没有小数部分 \s* - 允许零个或多个空白字符（您可能希望将其省略并先修剪字符串） $ - 字符串结束

【讨论】：

我认为 jquery 只允许尾随零并忽略它们并不重要。我进行了几次实验，无论我是小数点后一位还是 20，它们都是零，它并没有抛出“无效”结果。

@PaulDavis - jQuery 与此无关。当您拥有$val 时，您只是在使用 javascript 原生对象和函数，而不是 jQuery 提供的对象和函数。由于是字符串，"2"、"2.0"、"2.00"等都是不同的。天真地计算 . 之后的字符的方法将无法允许尾随零。

@T.J.Crowder 嗨 T.J.虽然您的解决方案似乎是最好的答案，而不是天真地在字符串拆分上执行.length，这难道不是可行的吗？ (parseFloat($val).toString().split('.')[1] || "").length; 使用 parseFloat 将删除尾随零。

@T.J.Crowder 我确实尝试过代码，如下所示：gyazo.com/064a59d9f2b771b2393f25b6129be51f（抱歉，它是 gif 格式的，哎呀）但它没有按预期工作。所以也许我的语法错误？

这是我尝试多个零并最终导致弹出框触发。 gyazo.com/6e1c7a471c6e8acfc0abfaf44e1754ab 很遗憾我做错了。否则看起来很棒！

【参考方案3】：

另一种方法是使用正则表达式进行验证：

var regex = /^\d+(\.\d0,2)?$/g;

// returns true if valid the param has 0,1,2 decimal points, otherwise returns false
function validateDecimalPoint(param) 

  console.log(regex.test(param));

  return regex.test(param);



validateDecimalPoint('2.12');

【讨论】：

我想学习如何使用正则表达式 - 前几天我试过了，但是很痛苦。我想有一天我会再次回到那个话题。

我强烈建议您深入研究一下。最好的地方是文档。 developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/… 此外，使用在线正则表达式测试器与他们一起练习一下非常有用。希望这会有所帮助。

gyazo.com/03af82a5e3018cfdf59ebda640003024 实际上，它可能只是 html 做的而不是 jQuery.. 但无论哪种方式它都会忽略所有的零，即使我有一个最大的步骤 0.01。

【参考方案4】：

这个代码已经解决了：

const isOpen = (val) => 
  const num = parseFloat(val);
  if (isNaN(num)) 
    return true;
   else 
    const decimals = num.toString().split('.')[1] || '';
    if (decimals.length > 2) 
      return true;
     else 
      return false;
    
  
;
$(document).ready(function() 
  $("#submitCalculation").click(function() 
    $(".checkLength").each(function() 
      const val = $(this).val();
      if (isOpen(val)) 
        $(this).popover(
          html: true,
          placement: "bottom",
          content: '<textarea class="popover-textarea"></textarea>',
          template: '<div class="popover"><div class="arrow"></div>' +
            '<div class="row"><div class="col-3 my-auto"><i class="fas fa-exclamation-triangle" id="invalid-input7">' +
            '</i></div><div class="popover-content col-9">Enter a value between 2 and 50 m with up to 2 decimal places.' +
            '</div></div>'
        );
        $(this).popover("show");
        $(this).click(function() 
          $(this).popover("hide");
        );
      
    )
  )
)

简而言之：弹出框只会针对空字符串、过高的数字、过低的数字或包含太多小数位的数字触发。

相反，对于不超过最大值 (2) 或只有零的小数位的正确值、整数或小数位，弹出框不会触发。