前端js 输入框限制（只能输入数字，10位小数，除0[0-9]、.、--、-0[0-9]、-.不能开头外，其他的都可以）？
可以使用如下正则表达式来限制输入框的输入内容：
/^(?!0\d|\.-|\.\.|-0\d|-)(?!.*\.\..*)(?!.*--.*)(?!.*-$)([1-9][0-9]*|0)(\.[0-9]{0,10})?$/
该正则表达式的解释如下：
^：匹配输入的字符串开头。
(?!0\d|\.-|\.\.|-0\d|-)：负向先行断言，表示输入的字符串不能以 0 开头、.-、..、-0 开头或 - 结尾。
(?!.*\.\..*)(?!.*--.*)：负向先行断言，表示输入的字符串不能包含两个及以上的连续 . 或 --。
(?!.*-$)：负向先行断言，表示输入的字符串不能以 - 结尾。
([1-9][0-9]*|0)：表示输入的字符串必须为数字，可以以 0 或者 1-9 开头，后面跟着 0 个或多个数字。
(\.[0-9]{0,10})?：表示输入的字符串可以包含小数点和最多 10 位小数。
$：匹配输入的字符串结尾。
可以将该正则表达式应用到输入框的 oninput 或 onkeydown 事件中，以便实时验证用户输入的内容，并在输入不符合要求时阻止输入。例如：
const input = document.querySelector('#myInput');
input.addEventListener('input', (event) => {
const value = event.target.value;
const isValid = /^(?!0\d|\.-|\.\.|-0\d|-)(?!.*\.\..*)(?!.*--.*)(?!.*-$)([1-9][0-9]*|0)(\.[0-9]{0,10})?$/.test(value);
if (!isValid) {
event.target.value = value.slice(0, -1); // 阻止输入
}
});
在这个例子中，我们首先获取了一个 id 为 myInput 的输入框，并添加了一个 input 事件监听器。在事件处理程序中，我们获取了输入框的值，并使用正则表达式对其进行验证。如果验证失败，我们阻止输入，即将输入框的值设为原来的值减去最后一位。这样，就能够实现对输入框的限制。
可以使用正则表达式来实现输入框限制，以下是一个符合要求的正则表达式：
javascriptCopy code/^(?!0\d)(?!.*\.\.)(?!.*\-\-)(?!0+\d)(?!.*\-\.)[1-9]\d*(\.\d{1,10})?$/
解释一下：
^ 匹配输入的开始位置
(?!0\d) 除了 0[0-9]，0 不能作为第一个数字
(?!.*\.\.) 不能输入两个以上的点
(?!.*\-\-) 不能输入两个以上的减号
(?!0+\d) 除了 0 开头的数字，其他数字开头不能有多余的 0
(?!.*\-\.) 不能输入减号和点组合，例如 -.12
[1-9]\d* 匹配数字，第一位不能为 0
(\.\d{1,10})? 匹配小数，小数点后最多 10 位
$ 匹配输入的结束位置
- javascriptCopy codeconst input = document.querySelector('#input');
- input.addEventListener('input', () => { const regex = /^(?!0\d)(?!.*\.\.)(?!.*\-\-)(?!0+\d)(?!.*\-\.)[1-9]\d*(\.\d{1,10})?$/; const value = input.value.trim(); if (!regex.test(value)) {
- input.value = value.slice(0, -1);
- }
- });
将这个正则表达式应用到输入框中，可以通过 oninput 事件监听输入框的变化，然后判断输入框的值是否符合正则表达式的规则。如果不符合，则禁止输入。以下是示例代码：
这样做可以在用户输入时动态地限制输入内容，保证输入的数据符合要求。
可以使用如下正则表达式来限制输入框的输入内容：
/^(?!0\d|\.-|\.\.|-0\d|-)(?!.*\.\..*)(?!.*--.*)(?!.*-$)([1-9][0-9]*|0)(\.[0-9]{0,10})?$/
