jquery min和max顯示新頁面

Question

我想驗證myForm，因此用戶可以輸入1到99之間的最大值。當我提交一個數字時，我得到一個空白頁面，這是一個select.php 。但我想留在我的索引頁上，並收到「你在下面」的消息。任何人都可以看到這裏有什麼問題？

的index.html：

<div class="content"> 
     <p id="number"></p> 
     <div class="form"> 


       <form id="myForm" action="select.php" method="post"> 
        <input type="number" name="numbervalue" id="numberinput"> 
        <input type="submit" id="sub" Value="Submit"> 
        <span id="result"></span> 
        <span id="testnumber"></span> 
       </form> 

     </div> 
    </div> 

JS：

var minNumberValue = 1; 
var maxNumberValue = 99; 

$('#sub').click(function(e){ 
    e.preventDefault(); 
    var numberValue = $('input[name=numbervalue]').val(); 
    if(isNaN(numberValue) || numberValue == ''){ 
    $('#testnumber').text('Please enter a number.') 
    return false; 
    } 
    else if(numberValue < minNumberValue){ 
    $('#testnumber').text('You are below.') 
    return false; 
    } 
    else if(numberValue > maxNumberValue){ 
    $('#testnumber').text('You are above.') 
    return false; 
    } 
    return true; 
}); 


// Insert function for number 
function clearInput() { 
    $("#myForm :input").each(function() { 
     $(this).val(''); 
    }); 
} 

    $(document).ready(function(){ 
     $("#sub").click(function(e) { 
     e.preventDefault(); // remove default action(submitting the form) 
     $.post($("#myForm").attr("action"), 
     $("#myForm :input").serializeArray(), 
     function(info){    
     $("#result").html(info); 
     }); 
     clearInput(); 
    }); 
    }); 



// Recieve data from database 
$(document).ready(function() { 
     setInterval(function() { 
     $('.latestnumbers').load('response.php') 
     }, 3000); 
    }); 

Answer 1

這裏有一個小功能來驗證號碼：

var minNumberValue = 1; 
var maxNumberValue = 99; 

$('#sub').click(function(e){ 
    e.preventDefault(); 
    var numberValue = $('input[name=numbervalue]').val(); 
    if(isNaN(numberValue) || numberValue == ''){ 
    $('#result').text('Please enter a number.') 
    return false; 
    } 
    else if(numberValue < minNumberValue){ 
    $('#result').text('You are below.') 
    return false; 
    } 
    else if(numberValue > maxNumberValue){ 
    $('#result').text('You are above.') 
    return false; 
    } 
    return true; 
}); 

您可以通過更改定義的最小值和最大值這兩個變量（如果您要提交給服務器，請務必檢查這些服務器端，因爲用戶可能會操縱這些變量通過開發工具代碼來改變這些邊界或提交他們想要的任何東西）。

結果信息顯示在您的span#result中，否則您也可以使用alert()。

這裏最重要的事情是在點擊功能（它的JavaScript事件）的e參數，調用e.preventDefault()（如果你不這樣做，表單將在完成驗證之前提交，作爲一個input[type=submit]默認操作是提交表格[去圖...]），只要條件不滿足，返回false，如果滿足驗證，則返回true。 return true;允許表單遵循其操作參數。

而與此小提琴：https://jsfiddle.net/3tkms7vn/（編輯：忘了提，我註釋掉return true;並用電話代替它的消息添加到span#result只是爲了防止的jsfiddle提交。）

Answer 2

如何利用在輸入標籤的「分鐘」和「最大」屬性，它會處理所有的驗證本身：

<input type="number" name="numbervalue" min="1" max="99"> 

乾杯，