2

尝试为输入字段创建验证,这将在输入字段旁边放置一条消息。如您所见,用户不能输入任何低于 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 中的示例但无济于事。

4

3 回答 3

5

开始,"#amount"只是一个字符串。您想要的是带有 of 的元素的idamount"#amount"是该元素的正确选择器,但您需要将其传递给 jQuery 函数才能实际选择它。所以:

var amountInput = $("#amount");

这为您提供了一个包含您的文本输入元素的 jQuery 对象。现在,您需要该输入的值,因此您需要调用该.val()jQuery 对象上的函数。但是,请记住,文本输入的值存储为字符串,因此在将其用作数字之前,您需要将其转换为数字。

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 完成构建后,但在图像等完成加载之前)。这可能不会有太大用处,因为您的用户没有时间输入值。

相反,将它绑定到一个事件,也许单击一个带有idof的按钮validate

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

我还建议阅读一些介绍性的 jQuery 教程

于 2013-02-12T16:30:38.827 回答
1

您当前在加载 dom 后立即运行此函数一次,而不是再次运行。您需要在输入更新时运行它。您可能想为此查看blur元素:http: //api.jquery.com/blur/

您还将字符串“#amount”与一个数字进行比较。您需要像这样比较字段的值:

if (parseFloat($("#amount").val(),10) < 500.00){
于 2013-02-12T16:32:39.890 回答
1

演示

$("#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");
    }
});
于 2013-02-12T16:34:58.357 回答