輸入數字驗證 - 限制只輸入數字或數字，int和float兩者

Question

如何限制輸入字段只輸入數字/數字int和浮動兩者。 有時我們需要允許像amount這樣的字段的整數和浮點值，因此在這種情況下需要驗證。 沒有可用的解決方案，但它們具有大尺寸代碼。 因此需要一個簡短但有效的代碼。

<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

Answer 1

不需要數字輸入限制的長代碼只需嘗試此代碼。

它還接受有效的int和float兩個值。

Javascript方法

 onload =function(){ var ele = document.querySelectorAll('.number-only')[0]; ele.onkeypress = function(e) { if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false; } ele.onpaste = function(e){ e.preventDefault(); } } 

 <p> Input box that accepts only valid int and float values.</p> <input class="number-only" type=text /> 

jQuery方法

 $(function(){ $('.number-only').keypress(function(e) { if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false; }) .on("cut copy paste",function(e){ e.preventDefault(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> Input box that accepts only valid int and float values.</p> <input class="number-only" type=text /> 

UPDATE

以上答案適用於大多數常見用例 - 將輸入驗證為數字。

但是根據評論，有些人希望允許一些特殊情況，比如負數，並在刪除之前向用戶顯示無效的擊鍵，因此下面是這些特殊用例的代碼片段。

 $(function(){ $('.number-only').keyup(function(e) { if(this.value!='-') while(isNaN(this.value)) this.value = this.value.split('').reverse().join('').replace(/[\\D]/i,'') .split('').reverse().join(''); }) .on("cut copy paste",function(e){ e.preventDefault(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> Input box that accepts only valid int and float values.</p> <input class="number-only" type=text /> 

Answer 2

單線解決方案＃1：

將<input type="number">與step屬性一起使用。

<input type="number" step="0.0001"> // The user can enter up to 4 decimal places.

<input type="number" step="any"> // Not supported in all browsers, but permits numbers of any decimal precision.

您還可以使用min和/或max屬性設置最小值和/或最大值。

---

單線解決方案＃2：

使用帶有RegExp pattern屬性的常規文本input元素。

<input type="text" pattern="^-?([0-9]*\.?[0-9]+|[0-9]+\.?[0-9]*)$">

此RegExp接受以點（ . ）和/或負號（ - ）開頭的數字。

Answer 3

首先要做的事情。 我更喜歡顯示無效的擊鍵而不是阻止它們。 用戶體驗Stack Exchange目前似乎同意（ 請參閱此問題 ）。

也就是說，不是每個人都同意，所以讓我們看看我們能做些什么。

第二。 這不會取代驗證步驟。 某些有效的擊鍵組合不是有效數字，但需要被允許才能輸入有效數字。 例如，用戶可以鍵入小數點（句號或逗號，具體取決於他們使用的語言），然后保留文本框，並且您沒有有效的數字。 以下字符串都是數字的開頭，但尚未生效：

• 。
• - 。
• ，
• - ， -

前兩個是.5或-.5的開頭，而后兩個在使用逗號而不是十進制標記的句點的各種語言中是相同的。

這帶給我們（已經被拒絕）

 <input type="number" step="any"> 

當然，您必須包含一個JavaScript腳本來修復非現代瀏覽器，但這些瀏覽器都可用。 理論上，當用戶使用逗號而不是小數點的句點來運行時，這些也應該正常工作。 更好的是，由於用戶通常只使用一個瀏覽器，並且因為他們將習慣輸入數字在該瀏覽器中的工作方式，並且因為他們將大部分時間花在除您之外的其他網站上，如果您的網站沒有，他們可能會感到困惑表現與他們習慣的方式相同。

但也許你還想制定自己的解決方案。 如果一切都失敗了，我會用正則表達式（是的，我知道，我現在有兩個問題）。 我不相信允許空格，因此我將其限制為負號，數字和一個小數點（無論它們使用哪個）。 例如：

 $('.rational-number').on('keypress', function(e) { if (e.charCode >= 32 && e.charCode < 127 && !/^-?\\d*[.,]?\\d*$/.test(this.value + '' + String.fromCharCode(e.charCode))) { return false; } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type-"text" class="rational-number"> 

這個ALMOST有效。 我現在唯一的問題是，它假設你輸入的任何字符都在字符串的末尾。 這是正常的，除了負數的' - '，只允許在開頭。 所以你可以輸入-5.4，但是如果你輸入5.4然后點擊主頁鍵或左箭頭回到開頭，它就不會讓你輸入負數。

它也不會處理粘貼。 粘貼是一個復雜的主題。 我不同意拒絕所有粘貼操作。 我覺得這里最好的選擇就是讓用戶粘貼並讓驗證者選擇任何無效的數字。

Answer 4

您可以將pattern屬性添加到輸入字段。 如果輸入值與模式不匹配，則可以使用css選擇器設置輸入字段的樣式和/或顯示錯誤消息:invalid ：

 .error-msg { display: none; /* Hide by default */ } .number-only:invalid { background: pink; } .number-only:invalid + .error-msg { display: inline; } 

 <input type='tel' class='number-only' pattern='[+\\-]?\\d*\\.?\\d+' /> <span class='error-msg'>Please enter a valid integer or float value.</span> 

一些說明：

• type='tel'使移動瀏覽器打開數字鍵盤，當然你也可以將類型設置為text 。
• 瀏覽器對pattern輸入屬性的支持： http ： //caniuse.com/#feat=input-pattern
• 瀏覽器支持:invalid css選擇器： http ： //caniuse.com/#feat=form-validation
• 模式正則表達式不支持指數表示法，例如1.23e4 。
• 模式正則表達式不允許使用空格 - 它們在int和float表示法中無效，但允許它們可能會改善用戶體驗。

Answer 5

在文本框的onkeypress中調用一個jquery函數。 在該函數中使用相應的ascii代碼來限制輸入。

Answer 6

用戶無法在js中輸入十進制值。 嘗試使用此代碼：

if(document.getElementById(id).value.indexOf('.') != -1){
    print "do not Enter decimal nuber";
}