仅在字段中限制一个 period/decimal（客户端验证）正则表达式 - JavaScript

Question

我在 JavaScript 中为字段 Value 设置了客户端验证功能，允许用户输入美元金额。验证工作完美（只允许输入数字和 periods/decimals）到字段中。所有其他字符都被简单地删除。 我想更新只允许输入一个decimal/period的功能，超过一个将被删除

这是我目前的情况：

onkeyup="if (!RegExp(/^\d*\.?\d*$/).test(this.value)) { this.value = this.value.replace(RegExp(/[A-Za-z-!$%^&*()_+|~=`{}\[\]:;'<>?,\/]+/).exec(this.value), '').replace(String.fromCharCode(34), '');}"

任何 help/suggestion 都很棒！

Answer 1

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

顺便说一句，如果您确实需要在 HTML 属性中使用双引号字符，只需使用 ".
RegExp(/^\d*\.?\d*$/) 重复。只需使用 /^\d*\.?\d*$/，因为它已经是一个正则表达式。 RegExp 用于将字符串转换为正则表达式，如下所示：RegExp("^\d*\.?\d*$").
调用 .exec() 并将其用作 .replace() 的参数是没有意义的。 .exec() returns 一个数组（包含匹配项），但是 .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(""); 
  }
}

（另见 .slice() and .join()）

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

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

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

<input oninput="removeInvalidNumberChars(this)">

仅在字段中限制一个 period/decimal（客户端验证）正则表达式 - JavaScript

Only limit one period/decimal in field (client-side validation) Regex - JavaScript

javascript

regex

client-side-validation