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有効性のプロパティを使用して入力を確認し、適切なエラー（またはカスタムエラー）メッセージを表示します。

以下の値（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>