这就是你需要的：D

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有效性属性检查输入并显示正确的错误（或自定义错误）消息。

使用以下值（null（空输入），1,55）尝试以下代码段并检查创建的自定义错误消息。

＆＃13;

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();
});

＆＃13;

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

＆＃13;

jQuery验证号

4 个答案:

这就是你需要的：D