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>

优势：

实时阻止非法字符输入，提升用户体验。
可以进一步定制允许的输入格式。

应用场景：

需要即时反馈输入合法性的表单字段。
移动端应用中防止键盘输入不合法字符。

三、常见问题及解决方法

问题1：用户可以通过粘贴输入非法字符 解决方法： 在 input 事件中进行验证和清理，如方法二所示，通过正则表达式移除不符合条件的字符。

问题2：多个负号或小数点输入 解决方法： 在 input 事件中限制负号只能出现一次且必须在最前面，小数点也只能出现一次。示例代码中已包含相关逻辑。

问题3：负号和小数点的顺序问题 解决方法： 确保负号在第一个位置，小数点后只能跟随数字。通过正则表达式或在 input 事件中添加逻辑进行控制。

四、总结

通过结合正则表达式和事件监听，可以有效限制用户在输入框中只能输入数字和负数。根据具体需求选择合适的方法，并处理好边界情况，如粘贴输入、多个符号输入等，以提升整体的用户体验和数据的准确性。

页面内容是否对你有帮助？

有帮助

没帮助

使用Android数字键盘，但允许使用负数

、、、

我有一个EditText字段，我只想输入负数或正数。有没有办法调出数字键盘并允许使用负数？

浏览 2提问于2014-09-16得票数 9

2回答

如何强制Excel中输入的值转换为负值

如何强制Excel中的任何数字转换为负数？例如，如果用户在A1中输入-10，那么它应该什么都不做，如果输入10，则应该*-1转换为否定。我已经将以下自定义单元格格式应用于整个工作表：#，##0.00_ ;(#，##0.00)，这意味着所有负数都显示在括号中。但是A1只能包含一个负数，所以如果用户输入一个正数，我希望它自动转换为负数。

浏览 0提问于2016-12-02得票数 1

回答已采纳

2回答

阻止用户在ASP.NET文本框中输入非数字数据

我正在做一个使用VS2010/C#的ASP.NET web项目，我有一些文本框，用户只能在其中输入数字，如何防止用户在文本框中输入非数字、浮点数和负数？当然，我可以在服务器端代码中检查输入的数字，但我认为将数据发送到服务器并执行验证将花费大量时间，有什么方法可以防止用户输入非数字值？或者至少不向服务器发送包含错误数据的数据？谢谢

浏览 4提问于2011-10-14得票数 2

回答已采纳

2回答

如何继续接收数字直到输入零，并计算用户entered.in文本框中的总正负号

、

更多详情：HTML <link href="ex2.css" rel="stylesheet"

浏览 6提问于2021-03-24得票数 0

回答已采纳

1回答

在程序中，用户可以输入四次多项式方程的值。该程序给出了含有数字的方程，并对用户输入的x值的方程进行了求解。我的问题是，如果用户输入一个负数，程序就不允许显示带有负数的方程(例如f(x) = 4x^4 + 3x^3 + 2x^2 + -x + -4)。我试过使用if-语句，而且我不太熟悉任何高级的方法(我的MATLAB知识相当基本，我们只能使用我们在课堂上学到的东西，除非我们得到了其他方面的许可)。如果用户输入负数，则符号(保存在变量中

浏览 4提问于2022-11-10得票数 0

1回答

仅仅使用数字不是数学的意义吗？

、、、

输入输入并不表示表达式等于什么。输出数字必须用大写字母打印。操作必须用小写打印。数字必须按照它们在输入中出现的顺序打印。输出中的数字可以是负数。否定词

浏览 0提问于2015-09-21得票数 3

6回答

仅限JQuery输入值数字和小数

我想输入字段只接受数字和小数。输入字段不应接受负数、字母、单十进制数以外的符号。数字1在输入类型为"text“的情况下工作得非常好。然而，number 2不起作用，唯一的区别是类型为number。我只想要数字和小数。没有负数，没有字母和符号。

浏览 1提问于2016-04-18得票数 3

2回答

正则表达式仅检查数字(负数和正数)

、

JSP上有一个输入字段，用户可以在其中输入数字(负数和正数)。我有一个JS函数，它检查输入字段上的每个key up事件都不是一个数字，它应该用空格代替它。

浏览 3提问于2014-05-10得票数 0

1回答

我能避免在HTML数字输入中输入双负号吗？

、

我的目标是确保一个经典的<input type="number">只能在数字的开头显示一个减号(比如.正常负数？)。问这个问题感觉很傻，但目前，在下面的输入中，我可以输入“-1”、"-1-“或”1-“，在这些情况下，本机元素的value属性只是给了我一个空字符串。这是故意的吗？

浏览 2提问于2021-07-06得票数 1

2回答

While循环输入问题

我正在尝试编写一个程序，它从用户那里获取数字，直到他们输入一个0，输出输入了多少个正数和负数，同时还告诉用户他们输入的数字是正数，负数还是零，然而，当我使用它时，如果输入了除了0之外的任何东西，它就会立即崩溃JS： var pos = 0;var inp = 1; while (inp !document.getElementByI

浏览 10提问于2020-11-03得票数 2

回答已采纳

1回答

用C++评分程序只能得到重现奇异响应

这个练习要求你写一个程序，你输入一个数字，然后它会输出你的分数，例如0-59是F，60-69是D，依此类推。<code>A0</code> 每当我运行程序时，无论我输入什么数字，它都只能返回字母grade F(即使我输入一个负数)。我已经摆弄了好几个小时了。仍然得到相同的响应。

浏览 2提问于2020-07-30得票数 1

回答已采纳

3回答

Python实验室-我被我实验室的代码卡住了

我的实验室要求我“提示输入一个数字，接受一个正的或负的number.Use --一种双重选择的”决策“结构，并打印一条信息，表明输入的数字是正数还是负数。”The number you entered is negative" getNumFromUser() 由于某些原因，它不会运行我的代码，当我取出elif语句时，它要求我输入数字，如果我输入负，它会要求我重新输入数字以得到正

浏览 5提问于2012-09-04得票数 1

回答已采纳

3回答

如何在扫描循环中添加数字？

、、、

有什么方法可以在scanf循环中添加所有数字吗？如果输入数字为负数，则循环将停止。问题是，负数也必须包括在总和中。在这里，我设法得到循环中重复的所有正scanf值的和，但是负数仍然不包含在所有数字的和中。

浏览 3提问于2021-02-27得票数 1

回答已采纳

1回答

如何将键盘设置为数字小键盘，是否可以在Xamarin.Forms中输入负数？

、、

该要求是显示键盘的默认数字，可以像这样输入一个负数：但是没有办法为这种方式设置默认值。有什么解决方案吗？

浏览 0提问于2017-10-17得票数 0

6回答

如何在PHP中删除所有点后的数字

示例: 1.123 =>1 1.999 => 1

浏览 0提问于2010-05-16得票数 7

回答已采纳

1回答

解析字符串如何包含锈蚀中的负数？

我从用户那里获取输入号码，然后检查这个数字是正数、负数还是零。执行了正数检查和零检查，但在检查负数方面存在问题。 print!std::io::stdin().read_line(&mut number);} 当输入是负数时，程序就会变得恐慌，没有解析负数。

浏览 2提问于2019-05-26得票数 0

回答已采纳

1回答

在输入数字字段中输入一个负数，并使用ng-pattern-restrict进行验证

、、、

$"时有一个输入数字字段，但是当我想输入一个负数时，我尝试了两种方法：ng-pattern-restrict = "^ \ d {0,13} (\ - \ d {0,13})?$"：此方法允许输入正数，但不允许输入负数，因为它需要前面

浏览 34提问于2018-01-11得票数 0

回答已采纳

2回答

如何防止用户使用material ui在TextField中输入字母

、、

我有一些TextField，用户只能输入正数。现在我有这个onKeyDown： <TextField error={!!"number" ></TextField> 这可以防止任何特殊字符，因为我不希望用户能够输入负数我可以添加什么来防止用户输入字母

浏览 28提问于2021-08-17得票数 2

1回答

检查哪个数字更大的程序

、、

我正在学习汇编(8086)，我们学习了跳跃，我们被告知要编写一个程序，从2个存储单元中获取2个数字，并将较大的一个放入另一个存储单元中。所以我写道：mov bl,[1]js eqeq: jmp end mov[10h],alend:但是我被告知它不会工作，因为我需要将js和jns更改为jc和jnc，以防这两个数字都

浏览 14提问于2021-03-12得票数 1

回答已采纳

1回答