Question

我有一个问题，对我来说这对初学者来说太难了。你能帮我么。我知道用javascript创建这个有点奇怪，但它只是我自己的项目，没有什么我会放在网上。但我需要通过使用纯香草Javascript解决这个问题，我有用户如下所示.js和我有一个页面，我需要创建一个新用户，可以像其他两个（管理员和访客）一样登录，我需要另一个访客用户，并根据输入值创建...在此先感谢，我仍在学习，评论也将受到赞赏..

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>

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

3 个答案: