jQuery驗證，只有數值

Question

我想驗證表單輸入值。下面的功能狀態是輸入的值是一個低於150的數字，顯示錯誤。按原樣工作。不過，我想補充一點。如果該值包含除數值以外的任何其他值，並且/或者是150以下的值，則顯示錯誤...

如何修改？

if ($('.billboard-height').val() < 150) { 
    $('.sb-billboardalert').fadeIn(600); 
} 

Answer 1

由於無論如何您的服務器端應該進行更全面的驗證，您可以使用parseInt或parseFloat，具體取決於您期望的值。然後檢查如果結果實際上是一個數字，它也能滿足你的約束：

var number = parseFloat($('.billboard-height').val()); // or parseInt depending on expected input 
if (isNaN(number) || number < 150) { 
    $('.sb-billboardalert').fadeIn(600); 
} 

編輯：

根據您的意見，您輸入的正則表達式的土地。我收集你只想要一個自然數（parseInt/parseFloat忽略像px，em等尾隨非數字字符的方式不正確）。如何：

var val = $('.billboard-height').val(); 
var number = parseInt(val, 10); 
if (! val.match(/^[0-9]{3,4}$/) || number < 150) { 
    $('.sb-billboardalert').fadeIn(600); 
} 

這應該只允許自然數150-9999。

Answer 2

我會建議使用正則表達式：

var intRegex = /^\d+$/; 
var floatRegex = /^((\d+(\.\d *)?)|((\d*\.)?\d+))$/; 

var str = $('#myTextBox').val(); 
if(intRegex.test(str) || floatRegex.test(str)) { 
    alert('I am a number'); 
    ... 
} 

或用單正則表達式按照@Platinum Azure的建議：

var numberRegex = /^[+-]?\d+(\.\d+)?([eE][+-]?\d+)?$/; 
var str = $('#myTextBox').val(); 
if(numberRegex.test(str)) { 
    alert('I am a number'); 
    ... 
}  

裁判：checking if number entered is a digit in jquery

Answer 3

您可以嘗試HTML5's built in form validation：

<input type="number" min="150"> 

browser support is still pretty shakey though

Answer 4

嘗試parseInt函數和用於檢查isNaN功能，如果值數和小於150：

var intVal = parseInt($('.billboard-height').val()); 
if(!isNaN(intVal)){ //not Number 
    if (parseInt($('.billboard-height').val()) < 150) { //not less than 150 
     $('.sb-billboardalert').fadeIn(600); 
    } 
} 

Answer 5

// Displays an alert if s contains a non-numeric character. 

function alertForNonNumeric(s) { 
    var rgx = /[^0-9]/; 
    if (s.search(rgx) !== -1) { 
     alert("Input contains non-numeric characters!"); 
    } 
} 

JS Fiddle here

注意：如果您想查詢負整數，以及，你可以一個減號添加到正則表達式：

function alertForNonNumeric(s) { 
    var rgx = /[^0-9-]/; 
    if (s.search(rgx) !== -1) { 
     alert(s + " contains non-numeric characters!"); 
    } 
} 

Answer 6

從輸入的任何值或選擇將在JavaScript字符串。您需要使用parseInt()才能使用>或<等運營商。 ==可如果你用它來比較字符串像if ($('.billboard-height').val() == "150")

Answer 7

使用不要忘記parseInt函數（）的基數參數：

if (parseInt($('.billboard-height').val(), 10) < 150) { 

這可能比使用一個正則表達式更快。正則表達式不是很快就知道的，但它們非常強大。這種情況可能是矯枉過正的。

Answer 8

如果您需要支持浮點數，你可以檢查一個變量使用是有效的：

function isNumber (n) { 
    return !isNaN(parseFloat(n)) && isFinite(n); 
} 

var val = $('.billboard-height').val(); 
if (isNumber(val) && parseFloat(val) < 150) { 
    $('.sb-billboardalert').fadeIn(600); 
} 

如果你只需要支持整數，使用parseInt(n, 10)，其中10爲基數，以字符串轉換至。

var val = parseInt($('.billboard-height').val(), 10); 
if (val && val < 150) { 
    $('.sb-billboardalert').fadeIn(600); 
} 

Answer 9

我使用這個解決方案，我發現它相當優雅 - 沒有警報，用戶有效地無法輸入非數字字符。

這是jQuery的例子：

function digitsOnly(){ 
    // extract only numbers from input  
    var num_val = $('#only_numbers').val().match(/\d+/); 
     $('#only_numbers').val(num_val); 
    } 

你的HTML：

<input type="text" name="only_numbers" id="only_numbers" on oninput="digitsOnly();"/>