最小和最大输入字段验证

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