我有一个输入字段，用户只能输入一个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

相关问题