如何根据输入值创建新用户

Question

我有一个问题，这对我作为初学者来说很难，太难了。你能帮我么。我知道用 javascript 创建它有点奇怪，但这只是我自己的项目，我不会在网上发布任何内容。但我需要通过使用纯香草 Javascript 来解决这个问题，我有 如下所示的.js 用户，我有一个页面，我需要在其中创建可以与其他两个（管理员和访客）一样登录的新用户，我需要另一个访客用户并根据输入值创建...在此先感谢，我仍在学习，cmet 也将不胜感激..

var el = document.getElementById("login");
if (el) {
  el.addEventListener('click', state);
}

function state() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  if (username == "admin" && password == "admin") {
    sessionStorage.setItem("isAdmin", "yes");
    alert("You are logged in as ADMIN !");
    window.location.href = "../index.html";
  } else if (username == "guest" && password == "guest") {
    sessionStorage.setItem("isAdmin", "no");
    alert("You are logged in as GUEST !");
    window.location.href = "../index.html";
  } else {
    alert("Incorrect username or password, try again !")
  }
}

<header>
  <div class="container">
    <div id="branding">
      <h1><span id="logo">mov</span>BLANK</h1>
    </div>
    <nav>
      <ul>
        <li><a href="../index.html">Home</a></li>
        <li><a id="newprojection" href="newprojection.html">New projection</a></li>
        <li><a id="buyticket" href="buyticket.html">Buy a ticket</a></li>
        <li class="current"><a id="newuser" href="newuser.html">New user</a></li>
        <li><a id="loginbtn" href="login.html">Log in</a></li>
        <li>
          <a id="nameofuser" href="#"></a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<div class="container">
  <form>
    <p>Username</p>
    <input type="text" name="username" required>
    <p>Password</p>
    <input type="password" name="password" required>
    <p>Repeat Password</p>
    <input type="password" name="password" required>
    <p>Function(admin/guest)</p>
    <input type="text" name="function" required>
    <a id="adduser" href="#">Add User</a>
  </form>
</div>

Answer 1

你可以保存两个数据：值和键，所以在你的代码中添加这个函数。

function saveData() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  if(!sessionStorage.getItem(username) == username) {
       sessionStorage.setItem(username, password);
  }else {
   alert(username + "already registered");

 }
}

更新这个

<input type="text" name="username" required id="username">
<p>Password</p>
<input type="password" name="password" required id="password">
<p>Repeat Password</p>
<input type="password" name="password" required>
<p>Function(admin/guest)</p>
<input type="text" name="function" required>
<a id="adduser" href="#" onclick="saveData();">Add User</a>

这就是逻辑，希望对你有所帮助

Answer 2

尝试创建一组有效用户，而不是使用 if-else 语句来检查每个单独的用户（不能适应其他用户）。

const users = [
  { username: 'admin', password: 'admin' },
  { username: 'guest', password: 'guest' },
];

然后当你想创建一个新用户时，推送到那个数组。验证登录：

function state() {
  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;
  const foundUser = users.find(user => user.username === username && user.password === password);
  if (!foundUser) {
    console.log('Invalid user!');
  } else {
    // Log the user in
  }
}

问题是，您当前的代码验证用户登录尝试（没有按钮），但不能（或不应该）与用于注册的表格相同，至少在不显着改变的情况下。

Answer 3

我做了一个工作示例，见下文。该示例仅用于测试/学习目的。我建议您使用 http 请求验证用户和密码并防止 sql 注入。

PS：这里是 jsfiddle：https://jsfiddle.net/xdLey6cp/24/

PS2：你可以用甜蜜的警报代替警报：https://sweetalert.js.org/guides/

<input type="text" id="txt_user" placeholder="user">
<!--you should use type=password here, but set as text for test purposes-->
<input type="text" id="txt_password" placeholder="password">
<input type="submit" id="createuser" value="create user">
<input type="submit" id="validateuser" value="validate new user">
<script>
    //adding event handlers
    document.querySelector('#createuser').onclick = create_user;
    document.querySelector('#validateuser').onclick = validate_user;

    function create_user()
    {
      //assign values for username and password
      var username = document.querySelector("#txt_user").value;
      var password = document.querySelector("#txt_password").value;
      //using sessionstorage to keep user and password values
      sessionStorage.setItem("username", username);
      sessionStorage.setItem("password", password);
      alert('new user is created');
    }

    function validate_user()
    {
      //getting previously recorded username and password
      var recorded_username = sessionStorage.getItem("username");
      var recorded_password = sessionStorage.getItem("password");
      //assign values for username and password
      var username = document.querySelector("#txt_user").value;
      var password = document.querySelector("#txt_password").value;
      //doing it as simple as possible, no filters (trim, lowercase) at all
      if (username==recorded_username && password==recorded_password)
      {alert('user and password are valid');}
      else
      {alert('validation error');}
    }
</script>