Question

我在一个div内有两种形式：

登录表单
注册表格

注册表单被隐藏，而加载页面时默认显示登录表单。我使用js脚本通过单击锚标记在这两种形式之间建立动画。

例如在尝试注册时会导致问题，并且您没有正确通过验证过程。

假设情况：

您已填写所有输入，单击提交按钮，结果发现您提供的用户名太短。该页面将重新加载，并再次显示默认表单即登录表单。然后，您再次需要单击“注册”标签以在表单之间切换，然后看到验证错误。

几天来，我一直在尝试阅读有关此操作的方法，但是似乎我无法用一个简短的短语来充分说明我的问题。你们可以解释我应该使用哪种方法并解释如何使用它吗？

HTML：

h1

JS：

<div class="login-page">
        <div class="form">
            <form class="register-form" method="POST">
                <input type="text" name="nick" placeholder="username"/>
                <input type="password" name="password1" placeholder="password"/>
                <input type="password" name="repassword" placeholder="repeat password"/>
                <input type="text" name="email" placeholder="e-mail adress"/>
                <button>Create</button>
                <p class="message">Already have an account? <a href="#">Log in!</a></p>
            </form>
            <form class="login-form" method="POST" action="login.php">
                <input type="text" name="login" placeholder="username"/>
                    <input type="password" name="password" placeholder="password"/>
                    <button>log in</button>
                    <p class="message">Don't have an account yet? <a id="createacc" href="#">Sign up!</a></p>
            </form>

我希望网站在重新加载页面之前记住您要填写的表格，而不是始终显示默认表格（登录表格）。

编辑：以防万一。是的，昨天我确实创建了与此类似的帖子，但我意识到自己对此的解释不够充分。希望一切顺利。

Answer 1

您可以使用sessionStorage，这与仅在当前会话中持续存在的cookie相似。切换表单的可见性时，请相应地设置还要显示的表单：

window.sessionStorage.setItem('lastOpenedForm', 'register');

页面再次加载后，从那里获取值并显示该表单：

window.sessionStorage.getItem('lastOpenedForm');

以下代码段中的自适应代码：

var lastOpenedForm = window.sessionStorage.getItem("lastOpenedForm");

// By default show login form; check if we should show register and toggle visibilities
if (lastOpenedForm === "register-form") {
  console.log('last opened form was register form');
  $(".form form").toggleClass("active-form");
  $(".login-page").toggleClass("bigger");
}

$(".message a").click(function() {
  $(".form form").toggleClass("active-form");
  var activeForm = $('.active-form').eq(0).attr('id');
  window.sessionStorage.setItem('lastOpenedForm', activeForm);
  console.log('last active form is ' + activeForm);
  $(".login-page").toggleClass("bigger");
});

// $("#createacc").click(function() {
//   window.sessionStorage.setItem("lastOpenedForm", "register-form");
// });

.login-page {
  width: 600px;
  height: 290px;
  background: #333333;
  border-radius: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5), 0 10px 10px 0 rgba(0, 0, 0, 0.24);
  transition: all 1s;
}

.login-page.bigger {
  height: 420px;
}

.form {
  position: relative;
  max-width: 360px;
  margin: auto;
  padding: 45px;
  text-align: center;
}

.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
  border-radius: 5px;
}

.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #666666;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px;
}

.form button:hover,
.form button:active,
.form button:focus {
  background: #808080;
}

.form .message {
  margin: 15px 0 0;
  color: white;
  font-size: 16px;
}

.form .message a {
  color: #1a8cff;
  text-decoration: none;
}

.form form {
  /*   display: none; */
  visibility: hidden;
  opacity: 0;
  height: 0;
  transition: 0.5s easy-in-out all;
}

.form .active-form {
  visibility: visible;
  opacity: 1;
  height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="login-page">
  <div class="form">
    <form id="register-form" method="POST">
      <input type="text" name="nick" placeholder="username" />
      <input type="password" name="password1" placeholder="password" />
      <input type="password" name="repassword" placeholder="repeat password" />
      <input type="text" name="email" placeholder="e-mail adress" />
      <button>Create</button>
      <p class="message">Already have an account? <a href="#">Log in!</a></p>
    </form>
    <form id="login-form" method="POST" class="active-form" action="login.php">
      <input type="text" name="login" placeholder="username" />
      <input type="password" name="password" placeholder="password" />
      <button>log in</button>
      <p class="message">Don't have an account yet? <a id="createacc" href="#">Sign up!</a></p>
    </form>
  </div>

也可用in this codepen。

Answer 2

如果您依赖JavaScript，那么您有一些可行的途径。

使用localStorage设置并获取状态。 https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
使用Cookie设置并获取状态。 https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
使用查询字符串参数作为URL的一部分，并使用Location api进行获取。 https://developer.mozilla.org/en-US/docs/Web/API/Location

Javascript无法记住状态，因此您必须使用上述策略。我个人会选择localStorage，因为它有一个很好的简单API。

Answer 3

您可以使用localStorage将状态存储在浏览器中。

<div class="login-page">
        <div class="form">
            <form class="register-form" method="POST" id="register">
                <input type="text" name="nick" placeholder="username"/>
                <input type="password" name="password1" placeholder="password"/>
                <input type="password" name="repassword" placeholder="repeat password"/>
                <input type="text" name="email" placeholder="e-mail adress"/>
                <button>Create</button>
                <p class="message">Already have an account? <a href="#">Log in!</a></p>
            </form>
            <form class="login-form" method="POST" action="login.php" id="login">
                <input type="text" name="login" placeholder="username"/>
                    <input type="password" name="password" placeholder="password"/>
                    <button>log in</button>
                    <p class="message">Don't have an account yet? <a id="createacc" href="#">Sign up!</a></p>
            </form>


var fo;
$(document).ready(function(){

console.log(localStorage.getItem('form'))

$('form').click(function(){fo=$(this).attr('id');
localStorage.setItem('form',fo);
})
})

工作fiddle

Answer 4

您可以考虑在表单操作属性的末尾使用URL片段-例如<form action="example.com/#register">。

URL片段通常用于跳转到页面的不同部分。因此，在这种情况下，它们可能比会话存储，cookie或查询字符串之类的其他选项在语义上更有意义。

您只需要侦听文档的load事件即可确定要定位的表单。像这样：

$(function () {
    if (window.location.hash == "register") {
        // show registration form here
    }
});

如何使网站记住上次显示的表格？

4 个答案: