簡體   English   中英

如何驗證在輸入框中輸入的值只是數字?

[英]How do I validate that value entered into an input box is just numbers?

我想知道最好和最簡單的方法是確保用戶在輸入框中輸入的值是網頁中的數字嗎? 要么通知他們在編輯時不允許他們進入,要么不允許他們輸入非數字值開頭。

有任何想法嗎?

謝謝

如果只允許整數值,我會嘗試類似的方法:

if( isNaN(parseInt(str, 10)) ) {
    //error
}

編輯:@ M28和@unomi是正確的,這可能允許一些不是數字的輸入。 M28在評論中發布了一個非常好的解決方案:

if( ! (parseInt(str, 10).toString() == str) ) {
    //error
}

您可以使用正則表達式^ \\ d * $

var re = new RegExp("^\d*$");
  if ($("#someinput").val().match(re)) {
    alert("Only numbers");
  } else {
    alert("No match");
  }

^ tells the expression to start matching from the beginning of the string. 
\d is a match for numbers which is the same as [0-9] (any number from 0 to 9)
* tells to match all numbers in string.
$ tells the expression to match until the end of the string.

$(“#someinput”)。val()是jquery,但您可以使用普通的javascript,例如:document.somepintput.value.match(re)。

正則表達式非常值得學習,因為它們可以以簡潔明了的方式解決許多問題。 常用表達

當nc3b關閉時,使用parseInt實際上將允許您可能不希望使用的情況。

parseInt("133t",10)

結果:133

最好做

if(isNaN(Number(str, 10)){
  Error;
}

如果要確保整個字符串必須代表數字。

我使用jquery和一個AlphaNumeric插件,請參見此處的演示

nc3bskyfoot已經發布了一些好的答案。

但是nc3b的答案可能會失敗,因為輸入的前導零如007並且允許指數輸入。

skyfoot的答案可能不允許負值,並且可能允許空字符串

為了避免這些陷阱,我在下面的代碼段中使用了它們。

 $(document).ready(function(){
      $("input").change(function(){
      var enteredValue = $(this).val();
      var re = new RegExp("^[-+]?[0-9]+$");
      if (enteredValue != "" && re.test(enteredValue)) {
        alert("You have entered valid integer");
      } else {
        alert("This is not valid integer");
      }
        //alert("The text has been changed.");
      });
    });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("input").change(function(){ var enteredValue = $(this).val(); var re = new RegExp("^[-+]?[0-9]+$"); if (enteredValue != "" && re.test(enteredValue)) { alert("You have entered valid integer"); } else { alert("This is not valid integer"); } //alert("The text has been changed."); }); }); </script> </head> <body> <input type="text"> <p>Write something in the input field, and then press enter or click outside the field.</p> </body> </html> 

您可以使用JavaScript來檢查可能使用isNAN函數查看輸入的值是否為數字的事件。

if(isNaN($('input [type = text]')。val())

再見isNaN表示不是數字

到目前為止,最好的選擇是通過驗證庫和/或輸入屏蔽庫,利用已經為您完成此任務的人員的工作。 不要重新發明輪子,已經為您發明了幾個漂亮的圓形輪子,其輪輞幾乎適合任何汽車。

在這里不鏈接特定的鏈接,因為那不是重點,在“ javascript表單驗證庫”上進行搜索會發現很多內容。

編輯我沒看一會兒,我不得不說,我喜歡的外觀這一項 驗證和屏蔽,而不是庫特定的(盡管您願意,也可以使用jQuery插件)。 同樣,鏈接它們並不是真正的重點,但是看起來很酷,可以喊出來。

代碼獲取輸入值,然后從頭到尾進行檢查,{5}是位數(這是可選的)。

function validzip(){ txt1 = document.FormName.InputName.value; if (/^\\d{5}$/ .test(txt1) == false){ /* Simpler/longer alternative to this is: if ((/[0-9]/g .test(txt1) == false) || (txt1.length != 5)){ */ alert('Not Valid'); return false; }

  return true; } 

與jQuery搭配使用-http: //digitalbush.com/projects/masked-input-plugin/

僅允許輸入數字。 它也非常易於使用和完全自定義,更不用說重量輕了。

在客戶端,從<input type="number"> (在尚不支持HTML5的瀏覽器中,這將被視為type="text" 。然后,對於非HTML5使用javascript(由其他人建議)瀏覽器。

如果人們關閉了javascript,也不要忘記服務器端驗證。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM