js 获取文本框内容必须是数字

在JavaScript中，确保获取的文本框内容必须是数字，可以通过多种方式实现。以下是一些基础概念和相关方法：

基础概念

输入验证：在用户提交数据之前，检查数据的有效性。
正则表达式：一种强大的文本处理工具，用于匹配字符串的模式。
事件监听：监听用户的输入事件，以便实时验证数据。

类型与应用场景

实时验证：适用于表单填写，用户在输入时即时检查。
提交前验证：在用户提交表单前进行全面检查。

示例代码

以下是一个简单的示例，展示如何在用户输入时实时验证文本框内容是否为数字：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Number Validation</title>
    <style>
        .error {
            color: red;
        }
    </style>
</head>
<body>
    <input type="text" id="numberInput" placeholder="Enter a number">
    <div id="errorMessage" class="error"></div>

    <script>
        const numberInput = document.getElementById('numberInput');
        const errorMessage = document.getElementById('errorMessage');

        numberInput.addEventListener('input', function() {
            const value = this.value;
            if (!/^\d*$/.test(value)) {
                errorMessage.textContent = 'Please enter only numbers.';
            } else {
                errorMessage.textContent = '';
            }
        });
    </script>
</body>
</html>