仅在字段中限制一个句点/小数（客户端验证）正则表达式

Question

我在 JavaScript 中有一个客户端验证函数，用于允许用户输入美元金额的字段值。验证工作完美（只允许输入数字和句点/小数）到字段中。所有其他字符都被简单地删除。我喜欢更新函数，它只允许输入一位小数/句点，超过一位将被删除这是我到目前为止所拥有的：onkeyup="if (!RegExp(/^\d*\.?\d*$/).test(this.value)) { this.value = this.value.replace(RegExp(/[A-Za-z-!$%^&*()_+|~=`{}\[\]:;'<>?,\/]+/).exec(this.value), '').replace(String.fromCharCode(34), '');}"任何帮助/建议都会很棒！

Answer 1

1. 不要将所有内容都塞入 HTML 事件属性中。写一个函数！String.fromCharCode(34)这也消除了仅使用双引号字符的必要性。

   顺便说一句，如果您确实需要在 HTML 属性中使用双引号字符，只需使用".

2. RegExp(/^\d*\.?\d*$/)是重复的。只需使用/^\d*\.?\d*$/, 因为它已经是一个正则表达式。RegExp如果您想将字符串转换为正则表达式，则使用：RegExp("^\\d*\\.?\\d*$").

3. 调用.exec()并使用它作为参数是.replace()没有意义的。.exec()返回一个数组（包含匹配项），但.replace()需要一个正则表达式（或字符串）作为它的第一个参数。您还需要将g(lobal) 标志添加到表达式中，否则只会替换第一个匹配项

   this.value = this.value.replace(/[A-Za-z-!$%^&*()_+|~=`{}\[\]:;'<>?,\/"]+/g, '');

   请注意，我在正则表达式中添加了双引号字符。但是，仅替换不是数字或句点的所有内容可能会更容易：

   this.value = this.value.replace(/[^\d.]/g, '');

不能仅使用正则表达式来删除额外的句点（至少不是在所有当前的浏览器中）。一种方法是在句点处处理.split字符串，然后将其与第一项和第二项之间的句点连接起来：

function removeAllButFirstPeriod(string) {

  const split = string.split(".");

  if (split.length === 1) {

    // If the split string contains only one element, then there were no periods in the string

    return split[0];

  } else {

    return split[0] + "." + split.slice(1).join(""); 

  }

}

最终结果（.test不需要。总是删除所有无效字符）：

function removeInvalidNumberChars(element) {
  element.value = removeAllButFirstPeriod(element.value.replace(/[^\d.]/g, ''));
}

与（input事件是比 更好的选择keydown）

<input oninput="removeInvalidNumberChars(this)">