正则表达式 - +/- 符号和小数

Regular Expression - +/- sign and decimal

本文关键字：小数 符号 正则表达式      更新时间：2023-09-26

我正在尝试为十进制数创建一个正则表达式，同时"-"或"+"符号在开头是可选的。

有很多关于这个的信息，所以我完成了这个：

/^[+-]?'d+('.'d+)?$/

因此，我已经使用test()功能在控制台中对此进行了测试，并且运行良好。

我的问题更多是关于在哪里进行此检查：

  • 如果检查是keypress事件，我可以使用preventDefault()来"消费"不正确的符号，但我正在像这样检索文本并且无法访问最后输入的符号 - $(event.target).val()

  • 如果检查是keyup事件，我可以访问整个文本，但我无法删除不正确的符号，因为我不知道它是哪个，以及它被放在哪里（使用鼠标它可以放在有效字符串的开头或中间）

我需要检查符号的组合，而不仅仅是验证符号。例如：

- //invalid
- 1 //valid
1. //invalid
1.2 //valid

所以，我想我应该检查何时输入整个刺痛，但是，两个如何删除不正确的字符？在无效时删除整个字符串看起来不正确。

以下是一种

可能的方法，可以告诉用户在不断输入时输入是否有问题。单击此处获取示例演示。

此外，我们还可以添加一个<div>列出允许的字符/格式。这除了让用户知道有问题之外，还会告诉他们什么构成了有效的输入。

.HTML：

<input id='ip' type='text'/>

.JS：

var regex = new RegExp(/^[+-]?'s*'d+('.'d+)?$/);
document.getElementById('ip').onkeyup = function(){
    var inputVal = this.value;
    if(!(regex.test(inputVal))) this.className='err';
    else this.className='noerr';
}

.CSS：

.noerr{
    color: green;
}
.err{
    color: red;
}

注意：HTML5 具有验证输入的内置方法，并且还具有伪类（如 :invalid 和 :valid）来执行与上述示例相同的操作。如果可以使用 HTML5，请尝试此示例。第二个输入字段是使用 HTML5 完成的（不需要 JS）。

HTML5：

<input id='iphtml5' pattern='[+-]?'s*'d+('.'d+)?' type='text' />

.CSS：

#iphtml5:valid{
    color: green;
}
#iphtml5:invalid{
    color: red;
}
相关文章：