我是javascript的新手。我写了这段代码，表格运作良好。但是脚本部分不起作用，任何人都可以找到代码的错误，并让我知道如何进行必要的调整，以便程序能够正常工作。
function validateform() {
var f = document.forms["myForm"]["fname"].value;
var l = document.forms["myForm"]["lname"].value;
var u = document.forms["myForm"]["uname"].value;
var p = document.forms["myForm"]["password"].value.length;
var a = document.forms["myForm"]["age"].value;
var g = document.forms["myForm"]["gender"].value;
var m = document.forms["myForm"]["mobile"].value.length;
var e = document.forms["myForm"]["email"].value;
if (f == "" || f == null) {
document.getElementsByTagName("fname").innerHTML = "Please Enter your First Name ";
status = false;
}
if (l == "" || l == null) {
document.getElementsByTagName("lname").innerHTML = "Please Enter your Last Name ";
status = false;
}
if (u == "" || u == null) {
document.getElementsByTagName("uname").innerHTML = "Please Choose a Username ";
status = false;
}
if (p < 6) {
document.getElementsByTagName("password").innerHTML = "Password must be atleast 6 characters ";
status = false;
}
if (a == "" || a == null) {
document.getElementsByTagName("age").innerHTML = "Please Enter your age";
status = false;
}
if (g == "" || g == null) {
document.getElementsByTagName("gender").innerHTML = "Please select your gender";
status = false;
}
if (m < 10 || m > 10) {
document.getElementsByTagName("mobile").innerHTML = "Please Enter a valid Mobile Number";
status = false;
}
if (e == "" || e == null) {
document.getElementsByTagName("email").innerHTML = "Please Enter a valid email address";
status = false;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<form name="myForm" method="post" action="/action_page_post.php" onsubmit="validateform()">
<fieldset>
<legend>
<h4>Registration Form</h4>
</legend>
<table>
<tr>
<td>First Name:</td>
<td><input type="text" name="fname" /></tr>
</td>
<tr>
<td>Last Name:</td>
<td><input type="text" name="lname" /></tr>
</td>
<tr>
<td>Username:</td>
<td><input type="userid" name="uname" /></tr>
</td>
<tr>
<td>Password:</td>
<td><input type="password" name="password" minlength="6" /></tr>
</td>
<tr>
<td>Age:</td>
<td><input type="number" name="age" /></tr>
</td>
<tr>
<td>Gender:</td>
<td><input list="genders" name="gender" /></tr>
</td>
<datalist id="genders">
<option value = "Male">
<option value = "Female">
<option value = "Other">
</datalist>
<tr>
<td>Mobile:</td>
<td><input type="number" name="mobile" minlength="10" /></tr>
</td>
<tr>
<td>E-mail:</td>
<td><input type="email" name="email" /></tr>
</td>
<tr>
<td colspan="2"><input type="submit" value="Submit" /> </td>
</tr>
</fieldset>
</table>
</form>
</body>
</html>
答案 0 :(得分：0)
正如我所见，有许多基本错误。语法会有问题。使用“getElementById”而不是“getElementByTagName”。并且还使用“return”关键字而不是“status”。请参阅下面的更新代码，您可以根据您的要求进行修改：
<!DOCTYPE html>
<html>
<head>
<script>
function validateform() {
var status = true;
var f = document.forms["myForm"]["fname"];
var l = document.forms["myForm"]["lname"];
var u = document.forms["myForm"]["uname"];
var p = document.forms["myForm"]["password"];
var a = document.forms["myForm"]["age"];
var g = document.forms["myForm"]["gender"];
var m = document.forms["myForm"]["mobile"];
var e = document.forms["myForm"]["email"];
if (f.value == "") {
f.style.background = 'Red';
document.getElementById("fname-error").innerHTML = "Please Enter your First Name";
status = false;
}
if (l.value == "") {
l.style.background = 'Red';
document.getElementById("lname-error").innerHTML = "Please Enter your Last Name";
status = false;
}
if (u.value == "") {
u.style.background = 'Red';
document.getElementById("uname-error").innerHTML = "Please Choose a Username";
status = false;
}
if (p.value.length < 6) {
p.style.background = 'Red';
document.getElementById("password-error").innerHTML = "Password must be atleast 6 characters";
status = false;
}
if (a.value == "") {
a.style.background = 'Red';
document.getElementById("age-error").innerHTML = "Please Enter your age";
status = false;
}
if (g.value == "") {
g.style.background = 'Red';
document.getElementById("gender-error").innerHTML = "Please select your gender";
status = false;
}
if (m.value.length < 10) {
m.style.background = 'Red';
document.getElementById("mobile-error").innerHTML = "Please Enter a valid Mobile Number";
status = false;
}
if (e.value == "") {
e.style.background = 'Red';
document.getElementById("email-error").innerHTML = "Please Enter a valid email address";
status = false;
}
return status;
}
</script>
</head>
<body>
<form name = "myForm" method = "post" action = "/action_page_post.php" onsubmit = "return validateform()">
<fieldset>
<legend>
<h4>Registration Form</h4>
</legend>
<table>
<tr>
<td>First Name:</td>
<td>
<input type = "text" name= "fname"/>
<div id = "fname-error" class = "error"></div>
</td>
</tr>
<tr>
<td>Last Name:</td>
<td>
<input type = "text" name = "lname"/>
<div id = "lname-error" class = "error"></div>
</td>
</tr>
<tr>
<td>Username:</td>
<td>
<input type = "userid" name = "uname"/>
<div id = "uname-error" class = "error"></div>
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type = "password" name = "password" minlength = "6"/>
<div id = "password-error" class = "error"></div>
</td>
</tr>
<tr>
<td>Age:</td>
<td>
<input type= "number" name = "age"/>
<div id = "age-error" class = "error"></div>
</td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input list = "genders" name = "gender"/>
<datalist id = "genders">
<option value = "Male">
<option value = "Female">
<option value = "Other">
</datalist>
<div id = "gender-error" class = "error"></div>
</td>
</tr>
<tr>
<td>Mobile:</td>
<td>
<input type="number" name="mobile" minlength = "10"/>
<div id = "mobile-error" class = "error"></div>
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<input type="email" name="email"/>
<div id = "email-error" class = "error"></div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Submit"/>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>