JS正则：只能输入数字和小数点|极客笔记

JS正则：只能输入数字和小数点

在前端开发中，表单验证是一个十分重要的环节。其中，限制用户在输入框中只能输入特定字符是一种常见的需求。比如，有时候我们希望用户在输入金额时只能输入数字和小数点，而不能输入其他字符。这时候，就可以通过正则表达式来实现这一限制。

正则表达式

正则表达式是用来匹配字符串中字符组合的模式。在JavaScript中，我们可以使用正则表达式来对字符串进行匹配。下面是一个简单的正则表达式，表示只能匹配数字和小数点：

/^(\d+|\d*\.\d+)$/

让我们逐步解释这个正则表达式：

^ 表示匹配字符串的开始
() 表示分组，用来对正则表达式进行组合
\d 表示匹配一个数字
+ 表示匹配前面的表达式一次或多次
* 表示匹配前面的表达式零次或多次
\. 表示匹配小数点
$ 表示匹配字符串的结束

因此，这个正则表达式可以匹配一串数字和一个小数点的组合，例如123.45、0.67等。

JavaScript代码实现

接下来，我们可以通过JavaScript来实现对输入框内容的实时校验，并限制用户只能输入数字和小数点。下面是一个示例代码：

// 获取输入框元素
const inputElement = document.getElementById('input');

// 监听输入框内容变化
inputElement.addEventListener('input', function() {
    const regex = /^(\d+|\d*\.\d+)$/;
    const value = inputElement.value;

    if (!regex.test(value)) {
        inputElement.value = value.slice(0, -1);
    }
});

在上面的代码中，我们首先获取到了一个input元素，然后通过addEventListener方法监听了输入框内容的变化。每当用户输入内容时，我们会通过正则表达式来验证输入的内容是否符合要求。如果不符合的话，我们会将最后一个字符删除，从而达到限制用户只能输入数字和小数点的目的。

运行结果

为了验证代码的效果，我们可以将上述代码放入一个HTML文件中，并在浏览器中打开。在输入框中尝试输入不同的内容，可以看到只有数字和小数点能够被输入，其他字符将会被自动删除。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>只能输入数字和小数点</title>
</head>
<body>
<input type="text" id="input">
<script>
  const inputElement = document.getElementById('input');

  inputElement.addEventListener('input', function() {
      const regex = /^(\d+|\d*\.\d+)$/;
      const value = inputElement.value;

      if (!regex.test(value)) {
          inputElement.value = value.slice(0, -1);
      }
  });
</script>
</body>
</html>

以上就是使用JavaScript正则表达式实现限制用户只能输入数字和小数点的方法。通过对输入框内容的实时校验，可以有效地增强用户体验，并减少错误输入的发生。