我制作了这样的html表单，由于某种原因，即使我使用onsubmit，表单仍然会被提交。 handleError（）函数应该将变量flawless设置为false，如果发生错误并且如果flawless是false document.myForm.onsubmit也应该设置为false并且表单不应该被提交。我非常困惑，一遍又一遍地看着它，我找不到任何错误。 Chrome调试器说这么笨蛋没有什么问题......我住的地方上午9:40所以我为我所做的每一个错字道歉
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sign Up</title>
<meta charset="UTF-8">
<style>
#error {color:red}
#birthday {float:left}
</style>
</head>
<body>
<h2>Sign Up</h2>
<h6 class="error">* requierd</h6>
<div>
<form action="process_data.php" method="POST" name="myForm" onsubmit="">
<table border="0">
<tr>
<td>Name:</td>
<td><input type="text" id="name" name="Name" maxlength="20" pattern="/^[A-Za-z ]+$/" placeholder="Your name"><span id="name_error" class="error"> * </span></td>
</tr>
<tr>
<td>E-Mail:</td>
<td><input type="text" id="email" name="E-Mail" pattern="/^(([^<>()\[\]\\.,;:\s@']+(\.[^<>()\[\]\\.,;:\s@']+)*)|('.+'))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/" placeholder="Your E-Mail adress"><span id="email_error" class="error"> * </span></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="pw" name="Password" minlength="8" maxlength="63" placeholder="Your password"><span id="pw_error" class="error"> * </span></td>
</tr>
<tr>
<td>Confirm Password:</td>
<td><input type="password" id="cpw" name="Confirm Password" minlength="8" maxlength="63" placeholder="Confirm your password"><span id="cpw_error" class="error"> * </span></td>
</tr>
<tr>
<td>Username:</td>
<td><input type="text" id="username" name="Username" pattern="/^[A-Za-z ]+$/" minlength="4" maxlength="20" placeholder="Your username"><span id="username_error" class="error"> * </span></td>
</tr>
<tr>
<td>Bio:</td>
<td><textarea rows="5" cols="40" id="bio" name="Bio" maxlength="120" placeholder="Something about you"></textarea></td>
</tr>
<tr>
<td>Location:</td>
<td><input type="text" id="loc" name="Location" pattern="/^[A-Za-z ]+$/" placeholder="Where are you from"></td>
</tr>
<tr>
<td>Website:</td>
<td><input type="text" id="url" name="URL" pattern="/^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/" placeholder="Your website"></td>
</tr>
<tr>
<td>Birthday:</td>
<td>
<div id="birthday">
<input type="number" min="1" size="2" max="31" id="dob" name="Day of birth" placeholder="day">
<input type="number" size="2" min="1" max="12" id="mob" name="Month of birth" placeholder="month">
<input type="number" size="4" min="1900" id="yob" name="Year of birth" placeholder="year"><span id="date_error" class="error"> * </span>
</div>
</td>
</tr>
<tr>
<td><input type="submit" id="submit" value="Submit"></td>
</tr>
</table>
</form>
</div>
<script>
function handleError(element) {
var x = element.value, xl = element.value.length;
var min = element.min, minl = element.minlength;
var max = element.max, maxl = element.maxlength;
var cpw = document.getElementById('cpw').value;
var pw = document.getElementById('pw').value;
var y = element.name, flawless = true;
try {
//Name:
if (y == "Name") {
if (x == "") throw y + " can't be empty!";
if (xl > maxl) throw y + " must have less than 20 characters!";
}
//E-Mail:
else if (y == "E-Mail") {
if (x == "") throw y + " can't be empty!";
}
//Password:
else if (y == "Password") {
if (x == "") throw y + "input field is still empty!";
if (x != cpw) throw "Passwords have to match!";
if (xl < minl) throw y + " must have alteast 8 characters!";
if (xl > maxl) throw y + " must have less than 63 characters!";
}
//Confirm PW:
else if (y == "Confirm Password") {
if (x == "") throw y + "input field is still empty!";
if (x != pw) throw "Passwords have to match!";
if (xl < minl) throw y + " must have alteast 8 characters!";
if (xl > maxl) throw y + " must have less than 63 characters!";
}
//Username:
else if (y == "Username") {
if (x == "") throw y + " is still empty!";
if (xl < minl) throw y + " must have alteast 4 characters!";
if (xl > maxl) throw y + " must have less than 20 characters!";
}
//Bio:
else if (y == "Bio") {
if (xl > maxl) throw y + " must have less than 20 characters!";
}
//Birthday:
else if (y == "Day of birth") {
if (x == "") throw y + " is still empty!";
if (x < min) throw y + " is too low!";
if (x > max) throw y + " is too high!";
}
else if (y == "Month of birth") {
if (x == "") throw y + " is still empty!";
if (x < min) throw y + " is too low!";
if (x > max) throw y + " is too high!";
}
else if (y == "Year of birth") {
if (x == "") throw y + " is still empty!";
if (x < min) throw y + " is too low!";
if (x > max) throw y + " is too high!";
}
}
catch(err) {
switch (y) {
case "Name":
document.getElementById('name_error').innerHTML += err;
flawless = false;
break;
case "E-Mail":
document.getElementById('email_error').innerHTML += err;
flawless = false;
break;
case "Password":
document.getElementById('pw_error').innerHTML += err;
flawless = false;
break;
case "Confirm Password":
document.getElementById('cpw_error').innerHTML += err;
flawless = false;
break;
case "Username":
document.getElementById('username_error').innerHTML += err;
flawless = false;
break;
case "Bio":
document.getElementById('bio_error').innerHTML += err;
flawless = false;
break;
case "Day of birth" || "Month of birth" || "Year of birth":
document.getElementById('date_error').innerHTML += err + " | ";
flawless = false;
break;
default:
//code block
}
}
finally {
x = "";
}
if (!flawless) document.myForm.onsubmit = false;
}
var today = new Date();
var year = today.getFullYear();
document.getElementById('name').onchange = handleError(this);
document.getElementById('pw').onchange = handleError(this);
document.getElementById('cpw').onchange = handleError(this);
document.getElementById('username').onchange = handleError(this);
document.getElementById('bio').onchange = handleError(this);
document.getElementById('dob').onchange = handleError(this);
document.getElementById('mob').onchange = handleError(this);
document.getElementById('yob').onchange = handleError(this);
document.getElementById('yob').max = year;
</script>
</body>
</html>
答案 0 :(得分：0)
由于重写会有很多工作，只需更改
即可if (!flawless) document.myForm.onsubmit = false;
到
document.myForm.onsubmit = flawless?null:function() {return false}
并且
window.onload=fuction() {
document.myForm.onsubmit = function() {return false}
}
如果没有任何更改，则停止立即提交，即点击提交按钮而不输入任何内容