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

Question

我正在检查有效输入并成功检查了空白输入，但是如何使用 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 的情况。

Answer 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 */ }

Answer 2

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

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

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

现场示例：

const rex = /^\s*(?:\d+|0)(?:\.\d{0,2}0*)?\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)(?:\.\d{0,2}0*)?\s*$/ 表示：

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

Answer 3

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

var regex = /^\d+(\.\d{0,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');

Answer 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) 或只有零的小数位的正确值、整数或小数位，弹出框不会触发。