jQuery驗證號

Question

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

我到目前為止所擁有的是：

$('#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語句都不是真的，那么我需要執行另一個功能。 如何添加呢？

Answer 1

_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);

Answer 2

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

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

Answer 3

這就是你需要的：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();
    }
});

祝好運！

Answer 4

使用HTML5的min和max屬性以及類型number的input （其中涵蓋了您提到的數字部分）。 使用rangeOverflow和rangeUnderflow有效性屬性檢查您的輸入並顯示正確的錯誤（或自定義錯誤）消息。

使用以下值（空（空輸入），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>