我在控制台中遇到错误，请给我帮助。
这是一个带有 JavaScript 验证的注册表单。其中，所有输入都是强制性的，输入的电子邮件地址应采用正确的格式。此外，密码和确认密码中输入的值应相同。而且在使用 javascript 验证之后，它应该在发生错误的文本框中显示正确的错误消息。它不显示错误消息。
提前致谢。
html 文件
<html>
<head>
<title>Registration Form..</title>
<link rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="register.js"></script>
</head>
<body>
<div class="outerContainer">
<div class="header">
<h3>Registration Form</h3>
</div>
<div class="innerContainer">
<h5>Registration Form</h5>
<form name="registerform">
<ul>
<li>
<label>First Name:</label>
<input type="text" id="first" onKeyup="validate()"> <div id="errFirst"></div>
</li>
<li>
<label>Last Name:</label>
<input type="text" id="last" onkeyup="validate()"> <div id="errLast"></div>
</li>
<li>
<label>e-mail id:</label>
<input type="text" id="email" onkeyup="validate()"> <div id="errEmail"></div>
</li>
<li>
<label>User Id:</label>
<input type="text" id="uid" onkeyup="validate()"><div id="errUid"></div>
</li>
<li>
<label>Password:</label>
<input type="password" id="pwd" onkeyup="validate()"> <div id="errPwd"></div>
</li>
<li>
<label>Confirm Password:</label>
<input type="password" id="confirm" onkeyup="validate()"> <div id="errConfirm"></div>
</li>
<li>
<input type="button" value="register" id="create" onclick="validate(); finalValidate();"><div id="errFinal"></div>
</li>
</ul>
</form>
</div>
<div class="footer">
<h5>Copy rights @2017</h5>
</div>
</div>
</body>
</html>
css 文件
li{
list-style:none;
padding: 5px;
margin: 10px;
}
.outerContainer {
border: 1px solid;
width: 500px;
height: 550px;
margin: 10px auto;
background:#fffccc;
background:img;
}
.footer, .header {
text-align: center;
border: 1px solid;
margin: 5px;
padding: 5px;
background:#0000ff;
}
.footer {
font-size: 11px;
clear:both;
font-style:Mistral;
}
.innerContainer{
border: 1px solid;
text-align: center;
margin: 5px;
height:400;
overflow: scroll;
padding: 5px;
background-image:url("https://image.freepik.com/free-vector/blue-abstract-background-with-lights_1048-3309.jpg");
}
form{
background:#ffccaa;
display-block:center;
}
h5{
text-align:center;
color:#ff23ff;
}
label{
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
span{
color:#ff0000;
}
javascript 文件
var divs=new Array();
divs[0]="errFirst";
divs[1]="errLast";
divs[2]="errEmail";
divs[3]="errUid";
divs[4]="errPwd";
divs[5]="errConfirm";
function validate(){
var inputs=new Array();
inputs[0]=document.getElementById('first').value;
inputs[1]=document.getElementById('last').value;
inputs[2]=document.getElementById('email').value;
inputs[3]=document.getElementById('uid').value;
inputs[4]=document.getElementById('pwd').value;
inputs[5]=document.getElementById('confirm').value;
var errors= new Array();
errors[0]="<span>Please enter your First name!</span>";
errors[1]="<span>Please enter your Last name!</span>";
errors[2]="<span>Please enter your e-mail-id!</span>";
errors[3]="<span>Please enter your User Id!</span>";
errors[4]="<span>Please enter your Password!</span>";
errors[5]="<span>Please enter your Confirm Password!</span>";
for(i in inputs){
var errMsg=errors[i];
var divMsg=divs[i];
if(inputs[i]=="")
document.getElementById(divMsg).innerHTML=errMsg;
else if(i==2){
var atpos=inputs[i].indexOf("@");
var dotpos=inputs[i].lastIndexOf(".");
if(atpos<1 || dotpos<atpos+2 || dotpos+2>= inputs[i].length)
document.getElementById('errEmail').innerHTML="<span>Enter Valid e-mail adderss!!</span>";
else
document.getElementById(divMsg).innerHTML="OK!";
}else if(i==5){
var ff=document.getElementById('pwd').value;
var ss=document.getElementById('confirm').value;
if(ss!=ff)
document.getElementById("errConfirm").innerHTML="<span>Your password doesnot match..!!</span>";
else
document.getElementById(divMsg).innerHTML="OK!";
}else
document.getElementById(divMsg).innerHTML="OK!";
}
}
function finalValidate()
{
var count = 0;
for(i=0;i<6;i++)
{
var divMsg = divs[i];
if(document.getElementById(divMsg).innerHTML == "OK!")
count = count + 1;
}
if(count == 6)
document.getElementById("errFinal").innerHTML = "All the data you entered is correct!!!";
else
document.getElementById("errFinal").innerHTML="Please enter all the required fields.!!";
}
最佳答案
代码中的几个拼写错误导致您在控制台中出错，
在 HTML 文件中，
<div id="errLirst"></div>
将 ID 值更改为 errLast，就像您在 JS 文件中提供的那样
document.getElementById("divMsg").innerHTML="OK!";
删除 divMsg id 的引号，因为 divMsg 是一个变量
在 JS 文件中，
vat dotpos=inputs[i].lastIndexOf(".");
变量 dotpos 的声明类型是 var 而不是 var。
关于javascript - 使用javascript验证注册表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42571719/