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

Question

我的网站上有一个注册和登录表格。我希望用户在完成注册表格并单击“注册”时或者在他们单击“登录”（如果他们已经注册但尚未登录）时保持登录状态。

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

这是我到目前为止所拥有的。

我将非常感谢所有回答我的询问的人。预先感谢！

HTML

//login form

<section class="module">
      <div class="container">
        <div class="row">
          <div class="col-sm-5 col-sm-offset-1 mb-sm-40">
            <h4 class="font-alt">Login</h4>
            <hr class="divider-w mb-10">
            <form class="form" name="loginForm" onSubmit="validateForm();" action="index_shop.html" method="post">
              <div class="form-group">
                <input class="form-control" id="username" name="usr" type="text" placeholder="username"/>
              </div>
              <div class="form-group">
                <input class="form-control" id="password" name="pwd" type="password" placeholder="password"/>
              </div>
              <div class="form-group">
                <button class="btn btn-round btn-b" type="submit" value="login">Login</button>
              </div>
              <div class="form-group"><a href="">Forgot Password?</a></div>
            </form>
          </div>    

 //register form
          <div class="col-sm-5">
            <h4 class="font-alt">Register</h4>
            <hr class="divider-w mb-10">
            <form class="form" name="regForm" onsubmit="return Validate();" action="index_shop.html" method="post">
              <div class="form-group">
                <input class="form-control" id="Email" type="text" name="email" placeholder="Email"/>
                <div id="email_error"></div>
              </div>
              <div class="form-group">
                <input class="form-control" id="RegUser" type="text" name="username" placeholder="Username"/>
                <div id="name_error"></div>
              </div>
              <div class="form-group">
                <input class="form-control" id="RegPass" type="password" name="password" placeholder="Password"/>
              </div>
              <div class="form-group">
                <input class="form-control" id="confirmPass" type="password" name="confirmPass" placeholder="Re-enter Password"/>
                <div id="password_error"></div>
              </div>
              <div class="form-group">
                <button class="btn btn-block btn-round btn-b" type="submit" value="register">Register</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>

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;
            }
        }

Answer 1

初始注释：假设登录意味着某种身份验证，并且考虑到任何身份验证都至少需要某种形式的安全性才能通过称为“测试”的测试，您几乎只有一个扩展的验证，而不是登录名。很好的学习精神，但我有义务指出，除了学习之外，它不应该用于其他任何用途，并且下面的回答只是出于透视，而不是其他任何目的

话虽如此，您似乎要寻找的只是保留用户已在表单中输入正确值这一事实的某种方式，以确保用户离开并返回或重新加载时，可以仍然将它们视为适当的输入者。

我想说，在JavaScript中将数据持久化的最常见/最简单的方法是通过cookie或LocalStorage。 LocalStorage确实存在一些问题，但是暂时不要进行讨论。为了存储数据，LocalStorage获取一个键和一个值，并将该值与该键关联存储在页面上用户的浏览器中。使用密钥，我们以后可以检索它。

因此，基本上，一个好的起点是创建一个能够持久存储数据并能够检索数据的函数。

我们可以创建如下内容：

// 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!");
}

Answer 2

我将首先说客户端javascript不应该处理任何身份验证。应该在服务器端进行验证，并在每次用户导航到“安全”页面时进行检查。就是说，这就是我要如何做。

1。。将登录成功信息存储在会话cookie中。您可以使用此轻量级插件来执行此操作。 https://github.com/js-cookie/js-cookie

2。。当用户提交登录表单并验证其信息正确无误时，将一个名为“ sessionAuth”的cookie设置为“ true”。您可以像这样在每次加载页面时检查此内容。 （我正在用jQuery编写代码，这很容易，但是如果需要，可以使用Plain JS）

var userName = "User's Name";

if ( Cookies.get("sessionAuth") && Cookies.get('sessionAuth') == "true" ) {
	//User is logged in
	$(".login-btn").attr("href","/account").text(userName);
}
else {
	//User is not logged in, do things here
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Help</a>
  <a class="login-btn" href="/login">Login</a>
</nav>

这就是我要做的，但是我永远不会在客户端这样做。任何人都可以看到您的代码，这是非常不安全的。我对此压力还不够！