表单验证问题。Javascript/HTML
在我的第一年Javascript项目中，我的表单验证逻辑有问题 特别是我的错误报告事件 当我测试“未输入用户名”等时，页面会随机刷新。 一些错误将显示片刻并消失 任何帮助都将不胜感激，并将有助于解决整个问题表单验证问题。Javascript/HTML,javascript,jquery,html,css,Javascript,Jquery,Html,Css,在我的第一年Javascript项目中，我的表单验证逻辑有问题 特别是我的错误报告事件 当我测试“未输入用户名”等时，页面会随机刷新。 一些错误将显示片刻并消失 任何帮助都将不胜感激，并将有助于解决整个问题 <body onload="setup()"> <div class="container-fluid"> <div class="page-header" class = "row"> <div class="col-lg-
<body onload="setup()">
<div class="container-fluid">
<div class="page-header" class = "row">
<div class="col-lg-12">
<img id="banner" src = "pictures/homepage/banner.jpg" width = "100%" height = "20%"></img>
</div>
<p id="charc">Charcoal</p>
</div>
<div class="butts">
<button onclick="dropdown()" class="button">Categories</button>
<button class="button">My Account</button>
<button class="button">Shopping Cart</button>
<button id="loggedIn-Out" class="button">Login/Register</button>
</div>
<div id="myDropDwn" class= "dropContent">
<a href = "#"> womens </a>
<a href = "#"> mens </a>
<a href = "#"> shoes </a>
<a href = "#"> accessories </a>
</div>
</div>
<div class="login-page" class="col-lg-6">
<div class="form">
<form id="logForm" class="login-form">
<input id="username" type="text" placeholder="Username">
<div id="login-user-error" class="errorReps"></div>
<input id="password" type="password" placeholder="Password">
<div id="login-pass-error" class="errorReps"></div>
<button onclick="loginUser()">Login</button>
<div id="login-error" class="errorReps"></div>
<p class="loginMessage"> Not Registered? <a href="#">Register</a>
<br>
<br>
<a href="register.html" id="logoutButton" onclick="logoutUser()">Logout</a>
</form>
<form id="regForm" class="register-form">
<input id="newFName" type="text" placeholder="First Name">
<div id="reg-FName-error" class="errorReps"></div>
<input id="newLName" type="text" placeholder="Last Name">
<div id="reg-LName-error" class="errorReps"></div>
<input id="newUName" type="text" placeholder="Username">
<div id="reg-UName-error" class="errorReps"></div>
<input id="newPass" type="password" placeholder="Password">
<div id="reg-pass-error" class="errorReps"></div>
<div id="passStrength"></div>
<input id="newEmail" type="email" placeholder="Email">
<div id="reg-email-error" class="errorReps"></div>
<input id="newPhone" type="number" placeholder="Tel. Number">
<div id="reg-phone-error" class="errorReps"></div>
<button onclick="registerUser()">Create</button>
<p class="loginMessage"> Already Registered? <a href="#">Login</a>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$('.loginMessage a').click(function(){
$('form').animate({height:"toggle", opacity: "toggle"}, "slow");
});
</script>
<script>
// pre-coded users
var existingUsers =
[
{
firstname: "Gerry",
lastname: "Agnew",
username: "GerryA",
password: "password123",
email: "gerry@gmit.ie",
phone:"0833333333"
},
{
firstname: "Sean",
lastname: "Duignan",
username: "SeanD",
password: "password456",
email: "sean@gmit.ie",
phone:"0822222222"
},
{
firstname: "Michael",
lastname: "Duignan",
username: "MichaelD",
password: "password789",
email: "michael@gmit.ie",
phone:"0844444444"
}
]
//function setup()
//{
// setup functions
//}
function dropdown()
{
document.getElementById("myDropDwn").classList.toggle("show");
}
username.addEventListener('blur', logUserVerify, true);
password.addEventListener('blur', logPassVerify, true);
newFName.addEventListener('blur', fNameVerify, true);
newLName.addEventListener('blur', lNameVerify, true);
newUName.addEventListener('blur', regUserVerify, true);
newPass.addEventListener('blur', regPassVerify, true);
newEmail.addEventListener('blur', emailVerify, true);
newPhone.addEventListener('blur', phoneVerify, true);
function loginValidate()
{
if(username == "")
{
document.getElementById("login-user-error").innerHTML = "Username required";
//username.focus();
return false;
}
if(password == "")
{
document.getElementById("login-pass-error").innerHTML = "Password required";
password.focus();
return false;
}
}
function registerValidate()
{
if(registerFName == "")
{
document.getElementById("reg-FName-error").innerHTML = "First Name required";
newFName.focus();
return false;
}
if(registerLName == "")
{
document.getElementById("reg-LName-error").innerHTML = "Last Name required";
newLName.focus();
return false;
}
if(registerUName == "")
{
document.getElementById("reg-UName-error").innerHTML = "Username required";
newUName.focus();
return false;
}
if(registerUName.length < 8)
{
document.getElementById("reg-UName-error").innerHTML = "Username must be 8 characters or more";
newUName.focus();
return false;
}
if(registerPass == "")
{
document.getElementById("reg-pass-error").innerHTML = "Password required";
newPass.focus();
return false;
}
if(registerEmail == "")
{
document.getElementById("reg-email-error").innerHTML = "Email required";
newEmail.focus();
return false;
}
if(registerPhone == "")
{
document.getElementById("reg-phone-error").innerHTML = "Phone number required";
newPhone.focus();
return false;
}
}
// Event Functions
function logUserVerify()
{
if (username != "")
{
document.getElementById("login-user-error").innerHTML = "";
return true;
}
}
function logPassVerify()
{
if (password != "")
{
document.getElementById("login-pass-error").innerHTML = "";
return true;
}
}
function fNameVerify()
{
if (registerFName != "")
{
document.getElementById("login-FName-error").innerHTML = "";
return true;
}
}
function lNameVerify()
{
if (registerLName != "")
{
document.getElementById("login-LName-error").innerHTML = "";
return true;
}
}
function regUserVerify()
{
if (registerUName != "")
{
document.getElementById("login-UName-error").innerHTML = "";
return true;
}
if (registerUName > 8)
{
document.getElementById("login-UName-error").innerHTML = "";
return true;
}
}
function regPassVerify()
{
if (registerPass != "")
{
document.getElementById("login-pass-error").innerHTML = "";
return true;
}
}
function phoneVerify()
{
if (registerPhone != "")
{
document.getElementById("login-phone-error").innerHTML = "";
return true;
}
}
function emailVerify()
{
if (registerEmail != "")
{
document.getElementById("login-email-error").innerHTML = "";
return true;
}
}
// Login/Register Functions
function loginUser()
{
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
for (i = 0; i < existingUsers.length; i++)
{
if(username == existingUsers[i].username && password == existingUsers[i].password)
{
alert(username + " Is logged in");
document.getElementById("loggedIn-Out").innerHTML = username;
document.getElementById("login-user-error").innerHTML = "";
localStorage.user = username;
localStorage.pass = password;
return;
}
else if(username != existingUsers[i].username)
{
document.getElementById("login-user-error").innerHTML = "Invalid, user does not exist";
username.focus();
return false;
}
else
{
loginValidate();
}
}
}
function logoutUser()
{
localStorage.removeItem("user");
localStorage.removeItem("pass");
document.getElementById("loggedIn-Out").innerHTML = "Login/Register";
}
function registerUser()
{
var registerFName = document.getElementById("newFName").value;
var registerLName = document.getElementById("newLName").value;
var registerUName = document.getElementById("newUName").value;
var registerPass = document.getElementById("newPass").value;
var registerEmail = document.getElementById("newEmail").value;
var registerPhone = document.getElementById("newPhone").value;
localStorage.regFname = registerFName;
localStorage.regLname = registerLName;
localStorage.regUname = registerUName;
localStorage.regPass = registerPass;
localStorage.regMail = registerEmail;
localStorage.regPhone = registerPhone;
var newUser =
{
firstname: registerFName,
lastname: registerLName,
username: registerUName,
password: registerPass,
email: registerEmail,
phone: registerPhone
}
for(i = 0; i < existingUsers.length; i++)
{
if(registerUName == existingUsers[i].username)
{
document.getElementById("reg-UName-error").innerHTML = "Username already exists";
newUName.focus();
return false;
}
if(registerEmail == existingUsers[i].email)
{
document.getElementById("reg-email-error").innerHTML = "Email already exists";
newEmail.focus();
return false;
}
registerValidate();
}
existingUsers.push(newUser);
}
// Password Strength functions
function passwordStr()
{
var passValue = document.getElementById("newPass").value;
if(passValue.length >= 8 && passValue.length <= 10)
{
document.getElementById("passStrength").innerHTML = "Weak";
}
else if(passValue.length > 10 && passValue.length <= 16)
{
document.getElementById("passStrength").innerHTML = "Average";
document.getElementById("passStrength").style.color = "yellow";
}
else if(passValue.length > 16)
{
document.getElementById("passStrength").innerHTML = "Strong";
document.getElementById("passStrength").style.color = "green";
}
else
{
document.getElementById("passStrength").style.color = "red";
}
}
var passInput = document.getElementById("newPass");
passInput.addEventListener("input", passwordStr);
</script>
木炭
类别
我的帐户
购物车
登录/注册
登录
是否未注册？
创造
是否已注册？
$（'.loginMessage a'）。单击（函数（）{
$（'form'）.animate（{height:“toggle”，opacity:“toggle”}，“slow”）；
});
//预编码用户
var existingUsers=
[
{
名字：“格里”，
姓：“阿格纽”，
用户名：“GerryA”，
密码：“password123”，
电子邮件：“gerry@gmit.ie",
电话：0833333333
},
{
名字：“肖恩”，
姓氏：“Duignan”，
用户名：“SeanD”，
密码：“password456”，
电子邮件：“sean@gmit.ie",
电话：082222
},
{
名字：“迈克尔”，
姓氏：“Duignan”，
用户名：“MichaelD”，
密码：“password789”，
电子邮件：“michael@gmit.ie",
电话：“084444”
}
]
//函数设置（）
//{
//设置功能
//}
函数下拉列表（）
{
document.getElementById（“myDropDwn”）.classList.toggle（“show”）；
}
username.addEventListener（'blur'，logUserVerify，true）；
密码.addEventListener（'blur'，logPassVerify，true）；
newFName.addEventListener（'blur'，fNameVerify，true）；
newLName.addEventListener（'blur'，lNameVerify，true）；
newUName.addEventListener（'blur'，regUserVerify，true）；
newPass.addEventListener（'blur'，regPassVerify，true）；
newEmail.addEventListener（'blur'，emailVerify，true）；
newPhone.addEventListener（'blur'，phoneVerify，true）；
函数loginValidate（）
{
如果（用户名==“”）
{
document.getElementById（“登录用户错误”）.innerHTML=“需要用户名”；
//username.focus（）；
返回false；
}
如果（密码==“”）
{
document.getElementById（“登录密码错误”）.innerHTML=“需要密码”；
password.focus（）；
返回false；
}
}
函数registerValidate（）
{
如果（RegisterName==“”）
{
document.getElementById（“reg FName error”）.innerHTML=“需要名字”；
newFName.focus（）；
返回false；
}
如果（RegisterName==“”）
{
document.getElementById（“reg LName error”）.innerHTML=“需要姓氏”；
newLName.focus（）；
返回false；
}
如果（registerName==“”）
{
document.getElementById（“reg UName error”）.innerHTML=“需要用户名”；
newUName.focus（）；
返回false；
}
如果（registerName.length<8）
{
document.getElementById（“reg UName error”）.innerHTML=“用户名必须是8个字符或更多”；
newUName.focus（）；
返回false；
}
如果（registerPass==“”）
{
document.getElementById（“reg pass error”）.innerHTML=“需要密码”；
newPass.focus（）；
返回false；
}
如果（registerEmail==“”）
{
document.getElementById（“reg电子邮件错误”）.innerHTML=“需要电子邮件”；
newEmail.focus（）；
返回false；
}
如果（注册电话==“”）
{
document.getElementById（“注册电话错误”）.innerHTML=“需要电话号码”；
newPhone.focus（）；
返回false；
}
}
//事件函数
函数logUserVerify（）
{
如果（用户名！=“”）
{
document.getElementById（“登录用户错误”）.innerHTML=“”；
返回true；
}
}
函数logPassVerify（）
{
如果（密码！=“”）
{
document.getElementById（“登录传递错误”）.innerHTML=“”；
返回true；
}
}
函数fNameVerify（）
{
如果（registerName！=“”）
{
document.getElementById（“登录FName错误”）.innerHTML=“”；
返回true；
}
}
函数lNameVerify（）
{
if（registerName！=“”）
{
document.getElementById（“登录名错误”）.innerHTML=“”；
返回true；
}
}
函数regUserVerify（）
{
如果（registerName！=“”）
{
document.getElementById（“登录取消错误”）.innerHTML=“”；
返回true；
}
如果（注册表名>8）
{
document.getElementById（“登录取消错误”）.innerHTML=“”；
返回true；
}
}
函数regPassVerify（）
{
如果（registerPass！=“”）
{
document.getElementById（“登录传递错误”）.innerHTML=“”；
返回true；
}
}
函数phoneVerify（）
{
如果（注册电话！=“”）
{
document.getElementById（“登录电话错误”）.innerHTML=“”；
返回true；
}
}
函数emailVerify（）
{
如果（registerEmail！=“”）
{
document.getElementById（“登录电子邮件错误”）.innerHTML=“”；
返回true；
}
}
//登录/注册功能
函数loginUser（）
{
var username=document.getElementById（“用户名”）.value；
var password=document.getElementById（“密码”）.value；
对于（i=0；i<button type="button" onclick="loginUser()">Login</button>