[我正在尝试使用一些JavaScript代码来验证我的xhtml代码。但是，当我提交表单时，它只会刷新页面，并且字段中的信息会消失。提交表单时，代码应显示“成功提交”之类的内容。我看过其他有类似问题但无济于事的问题。我究竟做错了什么？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd.">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MP creation form</title>
<link href="form.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1> Complete The Form Below and Submit </h1>
<form action ="#" method="post" name="formValidation" onsubmit="return submitForm()" >
<div>
First Name: <input type="text" id="fn" required=""/>
Last Name: <input type="text" id="ln" required=""/>
Constituency: <input type="text" id="con" required=""/>
Email: <input type="text" id="email" required=""/>
Years of Service: <input type="text" id ="years" required=""/>
Password: <input type="text" id="pword" required=""/>
Password Confirmation: <input type="text" id="pc" required=""/> <br/>
<input class= "button" type="submit" value="Submit" /> <br/>
<input type="hidden" value="6eb6ac241942dc7226aeb" />
</div>
</form>
<script type="text/javascript">
function submitForm(){
var Email = document.getElementId("email").value;
var emailregex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var yoserviceregex = document.getElementId("years").value;
var yoservice = /^(?:[0-9]|[1-4][0-9]|50)$/;
var password = document.getElementById('pword').value;
var passwordconfirmation = document.getElementById('pc').value;
if (emailregex.test(Email)){
document.getElementId("email").style.backgroundColor = "Green";
}else{
document.getElementId("email").style.backgroundColor = "red";
}
if (yoserviceregex.test(yoservice)){
document.getElementId("years").style.backgroundColor = "Green";
}else{
document.getElementId("years").style.backgroundColor = "red";
}
if(password!=passwordconfirmation){
document.getElementById('pc').innerHTML ="Try again! Passwords do not match!";
return false;
}else{
return true;
}
}
</script>
</body>
</html>
您需要防止表单的默认行为，首先传递event参数，以便我们可以在js中使用
onsubmit="return submitForm(event)"
必须在HTML中将其称为事件，但是我们可以在js中对其进行更改。
然后调用preventDefault()以防止页面刷新。
也有些语句中有错别字getElementId必须为getElementById
我没有碰到其他一些错误，因为问题不关乎它们。
//here we can rename the event attribute to whatever we want
// i picked e for short and it's widely used
function submitForm(e) {
e.preventDefault();
var Email = document.getElementById("email").value;
var emailregex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var yoserviceregex = document.getElementById("years").value;
var yoservice = /^(?:[0-9]|[1-4][0-9]|50)$/;
var password = document.getElementById('pword').value;
var passwordconfirmation = document.getElementById('pc').value;
if (emailregex.test(Email)) {
document.getElementById("email").style.backgroundColor = "Green";
} else {
document.getElementById("email").style.backgroundColor = "red";
}
if (yoserviceregex.test(yoservice)) {
document.getElementById("years").style.backgroundColor = "Green";
} else {
document.getElementById("years").style.backgroundColor = "red";
}
if (password != passwordconfirmation) {
document.getElementById('pc').innerHTML = "Try again! Passwords do not match!";
return false;
} else {
return true;
}
}input {
display: block;
}<h1> Complete The Form Below and Submit </h1>
<form action="#" method="post" name="formValidation" onsubmit="return submitForm(event)">
<div>
First Name: <input type="text" id="fn" /> Last Name: <input type="text" id="ln" /> Constituency: <input type="text" id="con" /> Email: <input type="text" id="email" /> Years of Service: <input type="text" id="years" /> Password: <input type="text"
id="pword" /> Password Confirmation: <input type="text" id="pc" /> <br/>
<input class="button" type="submit" value="Submit" /> <br/>
<input type="hidden" value="6eb6ac241942dc7226aeb" />
</div>
</form>