正則表達式 - +/-符號和小數

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;
}