尝试为输入字段创建验证,该输入字段将在输入字段旁边放置一条消息。如您所见,用户无法输入低于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中的示例但无处可去。
答案 0 :(得分:5)
首先,"#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
});
我还建议您仔细阅读some introductory jQuery tutorials。
答案 1 :(得分:1)
您正在加载dom时立即运行此功能一次,而不是再次运行。
您需要在更新输入时运行它。您可能希望查看blur
元素:http://api.jquery.com/blur/
您还将字符串“#amount”与数字进行比较。您需要比较字段的值,如下所示:
if (parseFloat($("#amount").val(),10) < 500.00){
答案 2 :(得分:1)
见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");
}
});