时间戳

首页 > 解决方案 > 如何使用 JavaScript 验证注册和登录表单

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

问题描述

我的网站上有一个注册和登录表格。我希望用户在填写注册表并单击注册时保持登录状态，或者当他们已经注册但未登录时单击登录时。

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

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

我将非常感谢所有回复我的询问的人。提前致谢！

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

标签： javascriptjqueryhtmlperformancevalidation

解决方案

我首先会说任何身份验证都不应该由客户端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>

我就是这样做的，但我永远不会在客户端这样做。任何人都可以看到您的代码，而且非常不安全。我怎么强调都不过分！

推荐阅读