最小和最大輸入字段驗證

Question

嘗試為輸入字段創建驗證，這將在輸入字段旁邊顯示一條消息。 如您所見，用戶不能輸入500以下或800以上的值

<input type="text" name="amount" id="amount" maxlength="6" autocomplete="off"/>
<span class="paymentalert"></span>

請原諒我正在學習的JavaScript。

$(function(){
    var min = 500.00;
    var max = 800.00;
    if ("#amount" < 500.00){
         return ("Your payment must be between £500 and £800");
        else if ("#amount" > 800.00)
         return ("Your payment must be between £500 and £800");
    else return false;
    };

嘗試使用Stackoverflow中的示例，但無濟於事。

Answer 1

首先， "#amount"只是一個字符串。 您想要的是id為amount的元素的值； "#amount"是該元素的正確選擇器，但是您需要將其傳遞給jQuery函數才能真正選擇它。 所以：

var amountInput = $("#amount");

這為您提供了一個包含文本輸入元素的jQuery對象。 現在，您需要輸入的值，因此需要在該jQuery對象上調用.val()函數。 但是，請記住，文本輸入的值存儲為字符串，因此在將其用作整數之前，需要將其轉換為數字。

var amount = parseFloat(amountInput.val(), 10);

整個事情：

var min = 500.00;
var max = 800.00;
var amountInput = $("#amount");
var amount = parseFloat(amountInput.val(), 10);
if (amount < 500.00){
     return ("Your payment must be between £500 and £800");
else if (amount > 800.00)
     return ("Your payment must be between £500 and £800");
else return false;

盡管您當前正在$(document).ready(function() {...})調用中調用代碼- $(function() {...})是一種簡寫形式-因此它將在頁面“加載”（實際上是在DOM完成構建之后，但在圖像等加載完成之前）。 這可能用處不大，因為您的用戶沒有時間輸入值。

而是將其綁定到一個事件，也許單擊一個id為validate的按鈕：

$('#validate').on('click', function(e) {
    // code above here
});

我還建議您通讀一些jQuery入門教程 。

Answer 2

當前，您會在dom加載后立即運行此功能，而不會再次運行。 輸入更新后，您將需要運行它。 您可能想為此研究blur元素： http : //api.jquery.com/blur/

您還將字符串“ #amount”與數字進行比較。 您需要像這樣比較字段的值：

if (parseFloat($("#amount").val(),10) < 500.00){

Answer 3

參見DEMO 。

$("#amount").bind("keyup keydown", function() {
    var amount = parseFloat($(this).val());
    if (amount) {
        if (amount < 500 || amount > 800) {
            $("span.paymentalert").html("Your payment must be between £500 and £800");
        } else {
            $("span.paymentalert").html("");
        }
    } else {
        $("span.paymentalert").html("Your payment must be a number");
    }
});