多用戶和密碼javascript登錄

Question

不知道這是否可能，我是js的新手，請記住這一點。 我想在我的小表格中有多個密碼和多個用戶名。 javascript代碼爲：

var attempt = 3; 
function validate(){ 
var username = document.getElementById("username").value; 
var password = document.getElementById("password").value; 
if (username == "root" && password == "root"){ // here is password and username 
sweetAlert ("Login successfully"); 
window.location = "success.html"; 
return false; 
} 
else{ 
attempt --;// Decrementing by one. 
sweetAlert("You have "+attempt+" attempt(s) left."); 
// Disabling fields after 3 attempts. 
if(attempt == 0){ 
sweetAlert("Oops...", "You have failed to log in 3 times, Fields have been turned off. Please try again later", "error"); 
document.getElementById("username").disabled = true; 
document.getElementById("password").disabled = true; 
document.getElementById("submit").disabled = true; 
return false; 
} 
} 

Answer 1

這是一個使用Map存儲登錄名和密碼的解決方案。它比使用if語句更易於管理，因爲每次登錄都意味着您的邏輯發生了變化。

let 
 
    attempts = 3, 
 
    logins = new Map([ 
 
    ['root', 'root'], 
 
    ['admin', 'admin'] 
 
    ]); 
 
    formElement = document.getElementById('form'); 
 

 
function disableForm() { 
 
    const 
 
    usernameInput = document.getElementById('username'), 
 
    passwordInput = document.getElementById('password'), 
 
    submitButton = document.getElementById('submit'); 
 

 
    usernameInput.setAttribute('disabled', 'disabled'); 
 
    passwordInput.setAttribute('disabled', 'disabled'); 
 
    submitButton.setAttribute('disabled', 'disabled'); 
 
} 
 

 
function decreaseAttemptsLeft() { 
 
    // Decrease attempts by 1. 
 
    attempts--; 
 
    
 
    // Check if attempts is 0... 
 
    if (attempts === 0) { 
 
    // ... and disable the form controls. 
 
    disableForm(); 
 
    // ... and show the user a message. 
 
    alert('You have failed to log in 3 times, Fields have been turned off. Please try again later'); 
 
    } else { 
 
    // Show a message with login attempts left. 
 
    const 
 
     message = `You have ${attempts} attempt(s) left.`; 
 
    alert(message); 
 
    } 
 
} 
 

 
function onFormSubmit(event){ 
 
    // prevent the actual form submission. 
 
    event.preventDefault(); 
 
    
 
    const 
 
    usernameInput = document.getElementById('username'), 
 
    passwordInput = document.getElementById('password'); 
 
    
 
    if (
 
    // When the logins map doesn't have a key for the username OR 
 
    !logins.has(usernameInput.value) || 
 
    // The password doesn't match the value for the user name 
 
    logins.get(usernameInput.value) !== passwordInput.value 
 
) { 
 
    // Decrease the number of attempts left. 
 
    decreaseAttemptsLeft(); 
 
    // Exit the method. 
 
    return; 
 
    } 
 
    
 
    // Show the success message. 
 
    alert('Login success!'); 
 
    // Reset the attempts counter. 
 
    attempts = 3; 
 
} 
 
    
 
form.addEventListener('submit', onFormSubmit);

<form id="form"> 
 
    <label> 
 
    Username: 
 
    <input type="text" id="username"/> 
 
    </label> 
 
    <label> 
 
    Password: 
 
    <input type="password" id="password"/> 
 
    </label> 
 
    
 
    <button id="submit">Login</button> 
 
</form>

只是要非常清楚：這是安全性非常差。除了愚弄你的小妹妹/兄弟之外，別這樣做。

Answer 2

這可以通過else if聲明來解決。

if (username == "root" && password == "root") { 
    // login user 1 
} 
else if(username == "username2" && password == "password2") { 
    // login user 2 
} 
else { 
    // reject 
} 

請記住，（因爲這似乎是在用戶的瀏覽器本地運行），這將是微不足道的用戶在頁面上直接編輯代碼，以接受他們選擇的任何登錄。着眼於接受服務器上的用戶憑據，只有您可以選擇使用哪個用戶名和密碼。