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

Question

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

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

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

所以，我已经使用test()函数在控制台中对此进行了test()并且它运行良好。

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

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

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

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

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

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

Answer 1

以下是一种可能的方法，告诉用户输入时输入是否有任何问题。 点击此处查看示例演示。

此外，我们还可以添加一个<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;
}