js 只能输入数字和负数

在 JavaScript 中限制输入只能为数字和负数，可以通过多种方式实现，以下介绍几种常见的方法及其相关概念、优势和应用场景。

一、基本概念

正则表达式（Regular Expression）：一种用于匹配字符串模式的工具，常用于验证输入内容是否符合特定规则。
事件监听（Event Listener）：监听用户在输入框中的输入行为，如 input、keypress 等事件，以便在用户输入时进行实时验证。

二、实现方法

方法一：使用正则表达式进行表单验证

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>仅允许数字和负数输入</title>
</head>
<body>
    <form id="numberForm">
        <label for="numberInput">请输入数字或负数：</label>
        <input type="text" id="numberInput" name="numberInput">
        <button type="submit">提交</button>
    </form>

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

        // 正则表达式：允许整数和小数，且可为负数
        const regex = /^-?\d*\.?\d+$/;

        form.addEventListener('submit', function(event) {
            const value = numberInput.value.trim();
            if (!regex.test(value)) {
                alert('请输入有效的数字或负数！');
                event.preventDefault(); // 阻止表单提交
            }
        });

        // 实时验证输入
        numberInput.addEventListener('input', function() {
            const value = numberInput.value;
            if (!regex.test(value)) {
                numberInput.setCustomValidity('请输入有效的数字或负数！');
            } else {
                numberInput.setCustomValidity('');
            }
        });
    </script>
</body>
</html>

优势：

简单高效，适用于大多数表单验证场景。
可扩展性强，可以根据需求调整正则表达式以适应不同的数字格式。

应用场景：

用户注册时的电话号码或身份证号输入（需调整正则）。
财务系统中金额的输入验证。

方法二：限制键盘输入

通过监听 keypress 或 keydown 事件，阻止不符合条件的字符输入。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>仅允许数字和负数输入</title>
</head>
<body>
    <label for="numberInput">请输入数字或负数：</label>
    <input type="text" id="numberInput">

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

        numberInput.addEventListener('keypress', function(event) {
            const char = String.fromCharCode(event.which);
            if (!/[0-9.-]/.test(char)) {
                event.preventDefault();
            }
        });

        // 防止多个负号或小数点
        numberInput.addEventListener('input', function() {
            let value = numberInput.value;
            value = value.replace(/[^0-9.-]/g, ''); // 移除非法字符
            value = value.replace(/(\..*)\./g, '$1'); // 只允许一个小数点
            value = value.replace(/-+/g, '-'); // 只允许一个负号且在最前
            if (value.startsWith('-')) {
                value = value.replace(/^-/, '');
                value = '-' + value.replace(/-/g, '');
            }
            numberInput.value = value;
        });
    </script>
</body>
</html>

优势：