使用javascript验证注册表
[英]Registration form validation using javascript
问题描述
It is getting error in console please give me help. 
控制台出现错误，请给我帮助。
It is a registration form with JavaScript validation.In this all the inputs are mandatory and email address entered should be in correct format.Also, the values entered in the password and confirm password should be same.And also after validating using javascript, display proper error message in text box where there is an error.It is not displaying error message too. 这是一个带有JavaScript验证的注册表格。在此所有输入均为必填项，输入的电子邮件地址应采用正确的格式。此外，在密码和确认密码中输入的值应相同。并且在使用javascript进行验证后，还应显示正确出现错误的文本框中显示错误消息。它也不显示错误消息。
Thanks in Advance. 提前致谢。
html file 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 file. // 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 file.. // 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.!!";
}
1 个解决方案
解决方案1
0 2017-03-03 06:36:49
A couple of typos in code because of which you got error in console, 由于您在控制台中出现错误，因此代码中有几次错字，
In HTML file, 在HTML文件中，
<div id="errLirst"></div>
Change the ID value to errLast like you have given in JS file 像在JS文件中给定的那样，将ID值更改为errLast
document.getElementById("divMsg").innerHTML="OK!";
Remove the quotes for the divMsg id, since divMsg is a variable 删除divMsg ID的引号，因为divMsg是变量
In JS File, 在JS文件中，
vat dotpos=inputs[i].lastIndexOf(".");
Declarative type for the variable dotpos is var not var. 变量dotpos的声明类型为var not var。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.