我有一個輸入字段，用戶只能輸入一個2到50之間的數字。上面或下面的任何內容都是無效的。它也必須是一個數值。jQuery驗證號碼

我到目前爲止是這樣的：

$('#searchTimes').click(function() { 
if($('#replyNumber').val()<=0) { 
     alert("Please select a value greater than 0 for number of guests"); 
    $('#replyNumber').focus(); 
     return; 
    } 

    if($('#replyNumber').val()>=51) { 
     alert("Please select a value less than or equal to 50 for number of guests"); 
    $('#replyNumber').focus(); 
     return; 
    } 

    if(isNaN($('#replyNumber').val())) { 
     alert("Please enter a numeric value only"); 
     $('#replyNumber').focus(); 
     return; 
    }  
});

是否有寫的更好更有效的方式^。

另外...如果所有這些IF語句不是真的，那麼我需要執行另一個函數。我如何添加？

來源

2017-02-13 j00m

你的最後一個條件永遠不會運行，因爲'VAL（）'總是返回一個字符串，從來沒有爲NaN。在檢查值之前，您可能需要'parseInt（$（'＃replyNumber'）。val（），10）'。如果此代碼按原樣運行，則可以在[codereview.se]上更好地詢問此問題，但請先查看他們的幫助中心。 –

首先取值一次，嘗試將其解析爲int並存儲在變量中 - 無需在每個if語句中調用.val（）方法。然後，如果所有其他條件都是假的，那麼要執行一個代碼塊，您應該創建一個is ... else鏈，而不是三個單獨的if，並在結尾處放置一個簡單的else，只有在所有其他條件均爲沒見過。 – Fiodor

_isValidNumber(number) { 
var message; 
var isValid; 
switch(number){  
    case number >= 51: 
    message = "Please select a value less than or equal to 50 for number of guests"; 
    isValid = false; 

    case number <= 0: 
    message = "Please select a value greater than 0 for number of guests"; 
    isValid = false; 

    case isNumeric(number): 
    var message = "Please enter a numeric value only"; 
    isValid = false; 

    default: 
    return true; 
    } 
    alert(message); 
    $('#replyNumber').focus() 
    return isValid; 
} 

function isNumeric(num){ 
    return !isNaN(num) 
} 

var number = $('#replyNumber').val(); 
var numberIsValid = _isValidNumber(number);

來源

2017-02-13 22:53:22

我會嘗試抽象出重複的代碼，像這樣：

<input id="replyNumber" > 

<button id="searchTimes">click</button> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script> 

$('#searchTimes').click(function() { 
    var val = $('#replyNumber').val() 


    if(val<=0) showErr("Please select a value greater than 0 for number of guests");  
    else if(val>=51) showErr("Please select a value less than or equal to 50 for number of guests"); 
    else if(isNaN(val))showErr("Please enter a numeric value only"); 

}); 


function showErr(msg){ 
     alert(msg); 
     $('#replyNumber').focus(); 
} 

</script>

來源

2017-02-13 22:53:47

這是你所需要的：d

$('#searchTimes').on('click',function() { 
    var do_function = 1; 
    if (!$.isNumeric($('#replyNumber').val())) { 
     alert("Please enter a numeric value only"); 
     $('#replyNumber').focus().select(); 
    } else if (+$('#replyNumber').val() < 2) { 
     alert("Please select a value at least 2 for number of guests"); 
     $('#replyNumber').focus().select(); 
    } else if (+$('#replyNumber').val() > 50) { 
     alert("Please select a value no more than 50 for number of guests"); 
     $('#replyNumber').focus().select(); 
    } else { 
     do_function = 0; 
    } 
    if (do_function) { 
     call_some_function(); 
    } 
});

祝你好運！

來源

2017-02-13 23:00:46

使用HTML5 min和max屬性和input類型number（它涵蓋了您提到的數字部分）。使用rangeOverflow和rangeUnderflow有效性屬性檢查您的輸入並提供適當的錯誤（或自定義錯誤）消息。

使用以下值嘗試下面的代碼片段（null（空輸入），1,55）並檢查創建的自定義錯誤消息。

function validateInput() { 
 
    var txt = ""; 
 
    if (document.getElementById("inp1").validity.rangeOverflow) { 
 
     txt = "Value larger than acceptable!"; 
 
    } 
 
    if (document.getElementById("inp1").validity.rangeUnderflow) { 
 
     txt = "Value smaller than acceptable"; 
 
    } 
 
    if (document.getElementById("inp1").validity.valueMissing) { 
 
     txt = "Please type a number!"; 
 
    } 
 
    document.getElementById("output").innerHTML = txt; 
 
} 
 
document.getElementById("btn").addEventListener("click", function(){ 
 
validateInput(); 
 
});

<form> 
 
    <input type="number" id="inp1" name="numberInput" min="2" max="50" required> 
 
    <button id="btn">go</button> 
 
</form> 
 
<div id="output"></div>

來源

2017-02-13 23:06:02

jQuery驗證號碼

回答

這是你所需要的：d

相關問題