我需要一些有关此 JavaScript 代码的帮助。我想验证夜间税框和姓名文本框，以便它们具有值。夜间文本框只能接受数字。
这是我的代码
$(document).ready(function() {
var emailPattern = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b/;
//var numeric = /^[0-9]+$/;
var regex = /[0-9]|\./;
$(":text, #error").after("<span>*</span>");
$("arrival_date").focus();
$(document).on("click", "#submit", function (e) {
var valid = true;
if ($("#name").val() === "") {
$("#name").next().text("This field is required.").css({
"color": "#FF0000",
"font-size": "13px"
});
valid = false;
}
else {
valid = true;
}
if ($("#nights").val() === "") {
valid = false;
$("#nights").next().text("This field is required.").css( {
"color": "#FF0000",
"font-size": "13px"
});
} else if (!regex.test("nights")) {
$("#nights").next().text("This field is required.").css( {
"color": "#FF0000",
"font-size": "13px"
});
valid = false;
}
else {
valid = true;
}
ad<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reservation request</title>
<link rel="stylesheet" href="main.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="reservation.js"></script>
</head>
<body>
<h1>Reservation Request</h1>
<form action="response.html" method="get"
name="reservation_form" id="reservation_form">
<fieldset>
<legend>General Information</legend>
<label for="arrival_date">Arrival date:</label>
<input type="text" name="arrival_date" id="arrival_date" autofocus><br>
<label for="nights">Nights:</label>
<input type="text" name="nights" id="nights"><br>
<label>Adults:</label>
<select name="adults" id="adults">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<label>Children:</label>
<select name="children" id="children">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label>Room type:</label>
<input type="radio" name="room" id="standard" class="left" checked>Standard
<input type="radio" name="room" id="business" class="left">Business
<input type="radio" name="room" id="suite" class="left last">Suite<br>
<label>Bed type:</label>
<input type="radio" name="bed" id="king" class="left" checked>King
<input type="radio" name="bed" id="double" class="left last">Double Double<br>
<input type="checkbox" name="smoking" id="smoking">Smoking<br>
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<label for="name">Name:</label>
<input type="text" name="name" id="name"><br>
<label for="email">Email:</label>
<input type="text" name="email" id="email"><br>
<label for="phone">Phone:</label>
<input type="text" name="phone" id="phone" placeholder="999-999-9999"><br>
</fieldset>
<input type="submit" id="submit" value="Submit Request"><br>
</form>
</body>
</html>UPDATED Code.
$(document).ready(function() { var emailPattern = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b/; //var numeric = /^[0-9]+$/; var regex = /[0-9]|\./; $(":text, #error").after("<span>*</span>"); $("arrival_date").focus(); function isNumeric(n) { return !isNaN(parseFloat(n)) && isFinite(n); } $(document).on("click", "#submit", function (e) { var valid = true; if ($("#name").val() === "") { $("#name").next().text("This field is required.").css({ "color": "#FF0000", "font-size": "13px" }); valid = false; } if ($("#nights").val() === "") { valid = false; $("#nights").next().text("This field is required.").css( { "color": "#FF0000", "font-size": "13px" }); } else if (isNumeric("#nights")) { $("#nights").next().text("This field is required.").css( { "color": "#FF0000", "font-size": "13px" }); valid = false; } if (valid === false) e.preventDefault(); }); });
我希望有人能帮助我
最佳答案
您可以使用现有函数来检查输入是否为数字(取自 here ):
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
您可以使用HTML5's input type number :
<input type="number" min="1" max="5">
您当前的正则表达式将不起作用，因为它对于包含任何类型数字的任何字符串都会返回 true，这不是预期的行为。
您对变量 valid 的使用也不正确:正如您现在的代码一样，如果 #nights 正确验证，您的表单输入将返回有效 - 它将忽略您姓名输入的结果。
关于javascript 验证文本框的数字和字符串，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40965880/