最小和最大输入字段验证

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

相反,将它绑定到一个事件,也许点击一个带有以下内容id的按钮validate:

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

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