如何使用JavaScript验证注册和登录表单

我有一个注册和登录表格在我的网站。我希望用户在填写注册表单并单击“注册”时保持登录，或者如果用户已注册但未登录，则在单击“登录”时保持登录

我还希望能够切换视图时，用户登录通过一个按钮在导航栏，有他们的用户名。当用户未登录时，导航栏中将显示登录/注册按钮

这就是我目前所拥有的

我将非常感谢所有对我的询问作出答复的人。提前谢谢

HTML

//登录表单
登录

登录
//登记表
登记

登记

JavaScript

//Login validatation

 function validateForm() {
            var user = document.loginForm.usr.value;
            var pass = document.loginForm.pwd.value;
            var username = "username";
            var password = "password";
            if ((user == username) && (pass == password)) {
                return true;
            }
            else {
                alert ("Login was unsuccessful, please check your username and password");
                return false;
            }
        }
//registerValidation

        var email = document.forms['regForm']['email'];
        var username = document.forms['regForm']['username'];
        var password = document.forms['regForm']['password'];
        var password_confirm = document.forms['regForm']['confirmPass'];

        var name_error = document.getElementById('name_error');
        var email_error = document.getElementById('email_error');
        var password_error = document.getElementById('password_error');

        username.addEventListener('blur', nameVerify, true);
        email.addEventListener('blur', emailVerify, true);
        password.addEventListener('blur', passwordVerify, true);

        function Validate() {
            // validate email
            if (email.value == "") {
                email.style.border = "1px solid red";
                document.getElementById('Email').style.color = "red";
                email_error.textContent = "Email is required";
                email.focus();
                return false;
            }
            // validate username
            if (username.value == "") {
                username.style.border = "1px solid red";
                document.getElementById('RegUser').style.color = "red";
                name_error.textContent = "Username is required";
                username.focus();
                return false;
            }
            if (username.value.length < 3) {
                username.style.border = "1px solid red";
                document.getElementById('RegUser').style.color = "red";
                name_error.textContent = "Username must be at least 3 characters";
                username.focus();
                return false;
            }
            // validate password
            if (password.value == "") {
                password.style.border = "1px solid red";
                document.getElementById('RegPass').style.color = "red";
                password_confirm.style.border = "1px solid red";
                password_error.textContent = "Password is required";
                password.focus();
                return false;
            }
            // check if the two passwords match
            if (password.value != confirmPass.value) {
                password.style.border = "1px solid red";
                document.getElementById('pass_confirm_div').style.color = "red";
                password_confirm.style.border = "1px solid red";
                password_error.innerHTML = "The two passwords do not match";
                return false;
            }
        }
        // event handler functions
        function nameVerify() {
            if (username.value != "") {
                username.style.border = "1px solid #5e6e66";
                document.getElementById('RegUser').style.color = "#5e6e66";
                name_error.innerHTML = "";
                return true;
            }
        }
        function emailVerify() {
            if (email.value != "") {
                email.style.border = "1px solid #5e6e66";
                document.getElementById('Email').style.color = "#5e6e66";
                email_error.innerHTML = "";
                return true;
            }
        }
        function passwordVerify() {
            if (password.value != "") {
                password.style.border = "1px solid #5e6e66";
                document.getElementById('RegPass').style.color = "#5e6e66";
                document.getElementById('confirmPass').style.color = "#5e6e66";
                password_error.innerHTML = "";
                return true;
            }
            if (password.value === password_confirm.value) {
                password.style.border = "1px solid #5e6e66";
                document.getElementById('confirmPass').style.color = "#5e6e66";
                password_error.innerHTML = "";
                return true;
            }
        }

//登录验证
函数validateForm（）{
var user=document.loginForm.usr.value；
var pass=document.loginForm.pwd.value；
var username=“username”；
var password=“password”；
如果（（用户==用户名）和（&（通过==密码））{
返回true；
}
否则{
警报（“登录不成功，请检查您的用户名和密码”）；
返回false；
}
}
//注册验证
var email=document.forms['regForm']['email']；
var username=document.forms['regForm']['username']；
var password=document.forms['regForm']['password']；
var password_confirm=document.forms['regForm']['confirmPass']；
var name_error=document.getElementById（'name_error'）；
var email_error=document.getElementById（“email_error”）；
var password_error=document.getElementById（'password_error'）；
username.addEventListener（'blur'，namevirify，true）；
email.addEventListener（'blur'，emailVerify，true）；
password.addEventListener（'blur'，passwordVerify，true）；
函数验证（）{
//验证电子邮件
如果（email.value==“”）{
email.style.border=“1px实心红色”；
document.getElementById（'Email'）.style.color=“红色”；
email\u error.textContent=“需要电子邮件”；
email.focus（）；
返回false；
}
//验证用户名
如果（username.value==“”）{
username.style.border=“1px实心红色”；
document.getElementById（'RegUser'）.style.color=“红色”；
name\u error.textContent=“需要用户名”；
username.focus（）；
返回false；
}
如果（username.value.length<3）{
username.style.border=“1px实心红色”；
document.getElementById（'RegUser'）.style.color=“红色”；
name_error.textContent=“用户名必须至少包含3个字符”；
username.focus（）；
返回false；
}
//验证密码
如果（password.value==“”）{
password.style.border=“1px实心红色”；
document.getElementById（'RegPass'）.style.color=“red”；
密码\u confirm.style.border=“1px实心红色”；
密码\u error.textContent=“需要密码”；
password.focus（）；
返回false；
}
//检查两个密码是否匹配
if（password.value！=confirmPass.value）{
password.style.border=“1px实心红色”；
document.getElementById（'pass\u confirm\u div'）.style.color=“red”；
密码\u confirm.style.border=“1px实心红色”；
password\u error.innerHTML=“两个密码不匹配”；
返回false；
}
}
//事件处理函数
函数名验证（）{
如果（username.value！=“”）{
username.style.border=“1px solid#5e66”；
document.getElementById（'RegUser'）.style.color=“#5e66”；
name_error.innerHTML=“”；
返回true；
}
}
函数emailVerify（）{
如果（email.value！=“”）{
email.style.border=“1px solid#5e66”；
document.getElementById（'Email'）.style.color=“#5e66”；
电子邮件_error.innerHTML=“”；
返回true；
}
}
函数passwordVerify（）{
如果（password.value！=“”）{
password.style.border=“1px solid#5e6e66”；
document.getElementById（'RegPass'）.style.color=“#5e66”；
document.getElementById（'confirmPass'）.style.color=“#5e66”；
密码_error.innerHTML=“”；
返回true；
}
if（password.value==密码\u确认.value）{
password.style.border=“1px solid#5e6e66”；
document.getElementById（'confirmPass'）.style.color=“#5e66”；
密码_error.innerHTML=“”；
返回true；
}
}

初始注释：假设登录意味着某种身份验证，并且考虑到任何身份验证都至少需要某种形式的安全性才能通过一个称为身份验证的测试，那么您几乎只需要

//Login validatation

 function validateForm() {
            var user = document.loginForm.usr.value;
            var pass = document.loginForm.pwd.value;
            var username = "username";
            var password = "password";
            if ((user == username) && (pass == password)) {
                return true;
            }
            else {
                alert ("Login was unsuccessful, please check your username and password");
                return false;
            }
        }
//registerValidation

        var email = document.forms['regForm']['email'];
        var username = document.forms['regForm']['username'];
        var password = document.forms['regForm']['password'];
        var password_confirm = document.forms['regForm']['confirmPass'];

        var name_error = document.getElementById('name_error');
        var email_error = document.getElementById('email_error');
        var password_error = document.getElementById('password_error');

        username.addEventListener('blur', nameVerify, true);
        email.addEventListener('blur', emailVerify, true);
        password.addEventListener('blur', passwordVerify, true);

        function Validate() {
            // validate email
            if (email.value == "") {
                email.style.border = "1px solid red";
                document.getElementById('Email').style.color = "red";
                email_error.textContent = "Email is required";
                email.focus();
                return false;
            }
            // validate username
            if (username.value == "") {
                username.style.border = "1px solid red";
                document.getElementById('RegUser').style.color = "red";
                name_error.textContent = "Username is required";
                username.focus();
                return false;
            }
            if (username.value.length < 3) {
                username.style.border = "1px solid red";
                document.getElementById('RegUser').style.color = "red";
                name_error.textContent = "Username must be at least 3 characters";
                username.focus();
                return false;
            }
            // validate password
            if (password.value == "") {
                password.style.border = "1px solid red";
                document.getElementById('RegPass').style.color = "red";
                password_confirm.style.border = "1px solid red";
                password_error.textContent = "Password is required";
                password.focus();
                return false;
            }
            // check if the two passwords match
            if (password.value != confirmPass.value) {
                password.style.border = "1px solid red";
                document.getElementById('pass_confirm_div').style.color = "red";
                password_confirm.style.border = "1px solid red";
                password_error.innerHTML = "The two passwords do not match";
                return false;
            }
        }
        // event handler functions
        function nameVerify() {
            if (username.value != "") {
                username.style.border = "1px solid #5e6e66";
                document.getElementById('RegUser').style.color = "#5e6e66";
                name_error.innerHTML = "";
                return true;
            }
        }
        function emailVerify() {
            if (email.value != "") {
                email.style.border = "1px solid #5e6e66";
                document.getElementById('Email').style.color = "#5e6e66";
                email_error.innerHTML = "";
                return true;
            }
        }
        function passwordVerify() {
            if (password.value != "") {
                password.style.border = "1px solid #5e6e66";
                document.getElementById('RegPass').style.color = "#5e6e66";
                document.getElementById('confirmPass').style.color = "#5e6e66";
                password_error.innerHTML = "";
                return true;
            }
            if (password.value === password_confirm.value) {
                password.style.border = "1px solid #5e6e66";
                document.getElementById('confirmPass').style.color = "#5e6e66";
                password_error.innerHTML = "";
                return true;
            }
        }

// Really just an abstraction of localStorage.setItem, it'll come in handy 
function storeData(storageKey, myValueToStore) {
    localStorage.setItem(storageKey, myValueToStore);
}

// Really just an abstraction of localStorage.getItem, it'll come in handy
function getData(storageKey) {
    localStorage.getItem(storageKey);
}

 function validateForm() {
      var user = document.loginForm.usr.value;
      var pass = document.loginForm.pwd.value;
      var username = "username";
      var password = "password";
      if ((user == username) && (pass == password)) {


          // User entered the correct input, lets store it so that we later can 
          // ensure that he has done so
          storeData("validatedUserName", user); // Store the user with key "validatedUserName"


          return true;
      }
      else {
          alert ("Login was unsuccessful, please check your username and password");
          return false;
      }
  }

// In some sort of start up or initially running script:
var previouslyEnteredUserName = getData("validatedUserName");

// If we didn't find any value, our variable will be null, so we can use that
// to check for "login"
if (previouslyEnteredUserName !== null) {
    alert("Hello " + previouslyEnteredUserName + ", welcome back!");
}
else {
     alert("Hey, you have never logged in to this system! I don't have any username stored for you in my LocalStorage!");
}