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

时间:2013-09-16 11:53:33

标签: javascript jquery css regex html5

我正在尝试为十进制数创建一个正则表达式,同时" - "或" +"标志在开始时是可选的。

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

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

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

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

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

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

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

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

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

1 个答案:

答案 0 :(得分:4)

以下是一种可能的方法,告诉用户输入时输入是否有任何问题。 Click here示例演示。

此外,我们还可以添加<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,请尝试this sample。第二个输入字段使用HTML5完成(不需要JS)。

<强> HTML5:

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

<强> CSS:

#iphtml5:valid{
    color: green;
}
#iphtml5:invalid{
    color: red;
}