我编写了一段 JavaScript 代码来验证注册表单，但即使我尝试提交所有字段都留空的表单，它仍然会提交该表单。
这是我的 JavaScript:
<script type = "text/javascript">
function hideError(){
document.getElementById("firstnameerror").style.display="none";
document.getElementById("lastnameerror").style.display="none";
document.getElementById("addresserror").style.display="none";
document.getElementById("emailerror").style.display="none";
document.getElementById("sexerror").style.display="none";
document.getElementById("ageerror").style.display="none";
document.getElementById("pwderror").style.display="none";
document.getElementById("disclosureerror").style.display="none";
}
function checkForm(){
var firstname=document.getElementById("firstname").value;
var lastname=document.getElementById("lastname").value;
var address=document.getElementById("address").value;
var email=document.getElementById("email").value;
var sex=document.getElementById("sex").value;
var age=document.getElementById("age").value;
var pwd=document.getElementById("pwd").value;
var disclosure=document.getElementById("disclosure").value;
if(firstname==null || firstname==""){
hideError();
document.getElementById("firstnameerror").style.display="inline";
document.getElementById("firstnamereq").style.display="none";
document.getElementById("firstname").select();
document.getElementById("firstname").focus();
alert('form error'); return false;
}
else if(lastname==null || lastname==""){
hideError();
document.getElementById("lastnameerror").style.display="inline";
document.getElementById("lastnamereq").style.display="none";
document.getElementById("lastname").select();
document.getElementById("lastname").focus();
alert('form error'); return false;
}
else if(address==null || address==""){
hideError();
document.getElementById("addresserror").style.display="inline";
document.getElementById("addressreq").style.display="none";
document.getElementById("address").select();
document.getElementById("address").focus();
alert('form error'); return false;
}
else if(email==null || email==""){
hideError();
document.getElementById("emailError1").style.display="inline";
document.getElementById("emailreq").style.display="none";
document.getElementById("email").select();
document.getElementById("email").focus();
}
var atpos=email.indexOf("@");
var dotpos=email.lastIndexOf(".");
else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length){
hideError();
document.getElementById("emailError2").style.display="inline";
document.getElementById("emailreq").style.display="none";
document.getElementById("email").select();
document.getElementById("email").focus();
alert('form error'); return false;
}
else if(sex==null || sex==""){
hideError();
document.getElementById("sexerror").style.display="inline";
document.getElementById("sexreq").style.display="none";
document.getElementById("sex").select();
document.getElementById("sex").focus();
alert('form error'); return false;
}
else if(age==null || age==""){
hideError();
document.getElementById("ageerror").style.display="inline";
document.getElementById("agereq").style.display="none";
document.getElementById("age").select();
document.getElementById("age").focus();
alert('form error'); return false;
}
else if(pwd==null || pwd==""){
hideError();
document.getElementById("pwderror").style.display="inline";
document.getElementById("pwdreq").style.display="none";
document.getElementById("pwd").select();
document.getElementById("pwd").focus();
alert('form error'); return false;
}
else if(pwd.length<4){
hideError();
document.getElementById("pwderror").style.display="inline";
document.getElementById("pwdreq").style.display="none";
document.getElementById("pwd").select();
document.getElementById("pwd").focus();
alert('form error'); return false;
}
else if (!(/[0-9]/).test(pwd)){
hideError();
document.getElementById("pwderror").style.display="inline";
document.getElementById("pwdreq").style.display="none";
document.getElementById("pwd").select();
document.getElementById("pwd").focus();
alert('form error'); return false;
}
else if (!(/[a-zA-Z]/).test(pwd)){
hideError();
document.getElementById("pwderror").style.display="inline";
document.getElementById("pwdreq").style.display="none";
document.getElementById("pwd").select();
document.getElementById("pwd").focus();
alert('form error'); return false;
}
else if(disclosure==null || disclosure==""){
hideError();
document.getElementById("disclosureerror").style.display="inline";
document.getElementById("disclosurereq").style.display="none";
document.getElementById("disclosure").select();
document.getElementById("disclosure").focus();
alert('form error'); return false;
}
return true;
}
</script>
这是表格:
<form onsubmit="return checkForm();" method="post" action="formtest.php">
First Name:<br/>
<input type="text" value="" id="firstname" name="firstname" size="25"/><br/>
<div id="firstnamereq"><em>Must be filled in</em><br/></div>
<div class=error id="firstnameerror">Required: Please enter your first name<br/></div><br/>
Last Name:<br/>
<input type="text" value="" id="lastname" name="lastname" size="25"/><br/>
<div id="lastnamereq"><em>Must be filled in</em><br/></div>
<div class=error id="lastnameerror">Required: Please enter your last name<br/></div><br/>
Address:<br/>
<input type="text" value="" id="address" name="address" size="50"/><br/>
<div id="addressreq"><em>Must be filled in</em><br/></div>
<div class=error id="addresserror">Required: Please enter your address<br/></div><br/>
Email:<br/>
<input type="text" value="" id="email" name="email" size="50"/><br/>
<div id="emailreq"><em>Must be a valid email address</em><br/></div>
<div class=error id="emailerror1">Required: Please enter your email address<br/></div>
<div class=error id="emailerror2">Not a valid email address!<br/></div><br/>
Sex:<br/>
<input type="radio" value="male" id="sex" name="sex"/>Male<br/>
<input type="radio" value="female" id="sex" name="sex"/>Female<br/>
<div id="sexreq"><em>Must select either one</em><br/></div>
<div class=error id="sexerror">Required: Please enter your sex<br/></div><br/>
Age:<br/>
<select name="age" id="age">
<option value=""/></option>
<option value="underage"/>16 - 17</option>
<option value="youth"/>18 - 25</option>
<option value="adult"/>26 - 40</option>
<option value="mature"/>41 - 65</option>
<option value="senior"/>66+</option>
</select><br/>
<div id="agereq"><em>Must select an age group</em><br/></div>
<div class=error id="ageerror">Required: Please enter your age group<br/></div><br/>
Password:<br/>
<input type="password" value="" id="pwd" name="pwd"/><br/>
<div id="pwdreq"><ul>
<li><em>Must be at least 4 characters long</em></li>
<li><em>Must have at least 1 character and 1 number</em></li>
</ul><br/></div>
<div class=error id="pwderror">Please make sure your password meets the following requirements:<br/>
<ul>
<li>Must be at least 4 characters long</li>
<li>Must have at least 1 character and 1 number</li>
</ul><br/></div><br/>
Disclosure: <input type="checkbox" value="accept" id="disclosure" name="disclosure"/>
I have read, understood and consent to the privacy policy.<br/>
<div id="disclosurereq"><em>Must be checked</em><br/></div>
<div class=error id="disclosureerror">Box must be checked<br/></div>
<p><input type="submit" name="submit" value="Register"><br/></p>
</form>
如果问题在该代码块中的某个地方很明显，我很抱歉，但对于我未经训练的眼睛来说，它是完全看不见的......我希望这里有人可以帮助我......
最佳答案
传递给 checkForm 的第一个参数是事件对象。尝试:
function checkForm(evt) {
// ... do validation and when it fails:
evt.preventDefault();
return false;
// ...
关于javascript - 即使 javascript 表单验证失败，表单也会提交，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16064166/