xhtml表单无法使用javascript代码进行验证
[英]xhtml form won't validate with javascript code
问题描述
我正在尝试使用一些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>
1 个解决方案
解决方案1
0 2019-11-26 18:58:12
您需要防止表单的默认行为，首先传递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>
为什么此xhtml表单无法验证？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.