Номер подтверждения 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 атрибуты и input типа number (который охватывает указанную цифровую часть). Используйте 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>