我的JavaScript验证表单不工作
我的验证表不起作用，我不知道为什么。我花了好几个小时试图解决这些错误，但没有成功 虽然电子邮件验证部分的代码看起来是正确的（或者不是正确的），但我似乎无法生成JavaScript代码来验证电子邮件格式 此外，我似乎无法阻止按钮转到死链接 每当我添加电子邮件验证JavaScript代码时，整个脚本都会被忽略，只处理特定部分 下面是我的代码 HTML我的JavaScript验证表单不工作,javascript,html,css,forms,validation,Javascript,Html,Css,Forms,Validation,我的验证表不起作用，我不知道为什么。我花了好几个小时试图解决这些错误，但没有成功 虽然电子邮件验证部分的代码看起来是正确的（或者不是正确的），但我似乎无法生成JavaScript代码来验证电子邮件格式 此外，我似乎无法阻止按钮转到死链接 每当我添加电子邮件验证JavaScript代码时，整个脚本都会被忽略，只处理特定部分 下面是我的代码 HTML 这里的主要问题是，您正在关闭mailformat变量之前的resetErrors函数。 这就是为什么代码的这一部分没有执行 进行更改后，还需要定义正在
这里的主要问题是，您正在关闭mailformat变量之前的resetErrors函数。 这就是为什么代码的这一部分没有执行
进行更改后，还需要定义正在使用但未在任何地方定义/声明的变量inputText。必须使用
test（）match（）<!DOCTYPE html>
<html>
<head>
<script src="script.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<title>FORM VALIDATION</title>
</head>
<body>
<div id="wrapper">
<div class="welcome">
<p>Welcome to the Ramones fan page!</p>
<p id="details">Please fill in your contact details below</p>
</div><!--welcome ends here-->
<div class="contianer">
<form id="form" method="POST" action="index.php" onsubmit="return validate()" name="vForm">
<div>
<h5>Name</h5>
<input type="text" name="username" class="textInput" placeholder="Username">
<div id="username_error" class="val_error"></div>
</div><!--Name ends here-->
<div>
<h5>Email</h5>
<input type="email" name="email" class="inputText" placeholder="Email">
<div id="email_error" class="val_error"></div>
</div><!--email ends here-->
<div>
<h5>Confirm Email</h5>
<input type="email" name="confirm_email" class="inputText" placeholder="Email">
<div id="confirm_email_error" class="val_error"></div>
</div><!--email ends here-->
<div>
<h5>Phone</h5>
<input type="text" name="phone" class="textInput" placeholder="Phone number">
<div id="phone_error" class="val_error"></div>
</div><!--phone ends here-->
<div>
<h5>Address</h5>
<input type="text" name="address" class="textInput" placeholder="Address">
<div id="address_error" class="val_error"></div>
</div><!--address ends here-->
<div>
<button type="submit" id="submit-btn" class="btn">Register</button>
</div><!--submit button ends here-->
</form><!--form ends here-->
</div>
</div><!--wrapper ends here-->
</body>
</html>
// JavaScript Document
// text-fields//
//Execute JS after the page has loaded
window.onload = function(){
//Get the submit button and add an event listener when the user submits the form
document.getElementById("submit-btn").addEventListener("click", function(event){
event.preventDefault();
checkFields();
});
//Function that checks all fields on page
function checkFields(){
//Select fields by type
var inputs = document.getElementsByTagName('input');
//Add flag to check if email validates
var hasErrors = false;
//Reset all errors
resetErrors();
//Loop through all input fields and make sure they are not empty
for(var i = 0; i < inputs.length; i++) {
if (inputs[i].value === '') {
document.getElementById(inputs[i].name+'_error').innerHTML= "Please enter " + inputs[i].placeholder;
document.getElementById(inputs[i].name+'_error').style.display = "block";
hasErrors = true;
}
}
//If no errors check if email is confirmed correctly
if (!hasErrors) {
var emailValue = document.getElementsByName("email")[0].value;
var confirmEmailValue = document.getElementsByName("confirm_email")[0].value;
//if emails are not equal//
if (emailValue !== confirmEmailValue) {
document.getElementById('confirm_email_error').innerHTML= "Emails need to be identical";
document.getElementById('confirm_email_error').style.display = "block";
} else {
//Reset all errors
resetErrors();
alert('Your form has been submited successfully');
}
}
}
function resetErrors(){
//Select all errors and reset
var errors = document.getElementsByClassName("val_error");
for(var i = 0; i < errors.length; i++) {
errors[i].style.display = "none";
errors[i].innerHTML = "";
}
}
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(inputText.value.match(mailformat))
{
document.write ("Thank you, Email Address Valid"); <--------------
document.form1.text1.focus();
return true;
}
else
{
alert("You have entered an invalid email address!");
document.form1.text1.focus();
return false;
}
}
/* CSS Document */
html{
background-image:url(ramoness.jpg);
background-repeat:repeat;
background-size:cover;
font-family: 'Indie Flower', cursive;
font-size:80px;
color:#FFF;
height: 100%;
}
.welcome{
margin-top:-5%;
margin-left:10%;
font-weight:bold;
}
#details{
font-size:50px;
margin-left:14%;
margin-top:-5%;
}
#form{
font-size:20px;
}
h5
{
margin-bottom: 15px;
}
.val_error
{
display: none;
width: 200px;
margin: 0 auto;
padding: 15px;
color: #FFF;
background-color: red;
font-size: 14px;
}
input
{
border: none;
border-radius: 5px;
padding: 15px 5px;
width: 200px;
margin-bottom: 10px;
}
.contianer
{
width: 400px;
margin: 0 auto;
text-align: center;
}
#submit-btn
{
text-align: center;
margin: 0;
border: 0;
padding: 0;
display: inline-block;
vertical-align: middle;
white-space: normal;
background: none;
line-height: 1;
font-size: 13px;
background-color: #FFF;
outline: none;
width: 200px;
padding: 10px;
margin-top: 20px;
}