如何基於輸入值創建新用戶

Question

我有一個問題，對於初學者來說，這很難，也很難。 你能幫我么。 我知道用javascript創建它有點奇怪，但這只是我自己的項目，我不會在網絡上放任何東西。 但是我需要通過使用純Vanilla 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>