從數組驗證表單

我是JavaScript新手，我試圖創建一個登錄頁面，並從數組中獲取用戶名和密碼或引腳。我盡我所能把它放在一起，使它工作，但我不能。任何幫助都可以使用。此刻登錄表單不從數組中拉出。請幫忙。
原代碼：從數組驗證表單

} 
    var customer= ["John", "Mary", "Doe"] 
    var pin = [1452, 7858, 2016] 

    function validateusername(username) { 
     if (username == customer) { 
     return true; 
     }else { 
     return false; 
     } 
    } 
    function validatepassword(password) { 
     if (pin == pin) { 
     return true; 
     }else { 
     return false; 
     } 
    }

新更新的代碼（仍然不運行）

<body> 
<h1> Login to the Web ATM </h1> 
<script src="js/scripts.js"></script> 
<section class="loginform cf"> 
</section> 
<form id="login" name="login" action="index_submit" onSubmit="return false" method="get" accept-charset="utf-8"> 
<table> 
    <tr> 
    <td> <label for="username">Username:</label></td> 
    <td><input type="text" name="username" id="username" placeholder="UserName" required ></td> 
    <td>REQUIRED</td> 
    </tr> 
    <tr> 
    <td><label for="password">PIN Number:</label></td> 
    <td><input type="password" name="password" id="password" placeholder="PIN" pattern="[0-9]{4}" required ></td> 
    <td>REQUIRED</td> 
    </tr> 
    <tr> 
    <td><label for="email">Email:</label></td> 
    <td><input type="email" name="email" id="email" placeholder="[email protected]" pattern="^(?=.*\..*)(?=.*@.*).*$" ><br/></td> 
    <td><div id="reqDisplay"></div></td> 
    </tr> 
    <tr> 
    <td> Empty </td> 
    <td><input id="emailBox" type="checkbox" name="checkbox" value="email transaction " onchange="displayReq()"/>email me a transaction confirmation</td> 
    <td> </td> 
    </tr> 
    <tr> 
    <td></td> 
    <td> Select an Account: <select> 
    <option value="account1">Checking</option> 
    <option value="account2">Savings</option> 
    <option value="account2">Money Market</option></select></td> 
    <td><input type="submit" value="Continue>>" onclick="validateForm()"></td> 
</form> 

</table> 

<script type="text/javascript"> 

function displayReq(){ 
    var divToReplace = document.getElementById("reqDisplay"); 
    var chk = document.getElementById("emailBox"); 
    var emailField = document.getElementById("email"); 

    if (chk.checked) { 
    emailField.required = true; 
    divToReplace.innerHTML = "REQUIRED"; 
    }else { 
    divToReplace.innerHTML = ""; 
    emailField.required = false; 
    } 
} 

function validateForm(){ 
    var myForm = document.getElementById("login"); 
    var chk = document.getElementById("emailBox"); 

} 
var all_usernames = ["John", "Mary", "Doe"]; 
var all_pins = ["1452", "7858", "2016"]; // Make it strings, since input values are strings 

function validate_user(username, pin) { 
    var user_index = all_usernames.indexOf(username); 
    if (user_index > -1) { 
     return pin == all_pins[user_index]; 
    } else { 
     return false; 
    } 
function validateemail(email) { 

    if (email.indexOf("@") > -1 && email.indexOf(".") > -1) { 
    return true; 
    }else { 
    return false; 
    } 
    if (validateusername(myForm.username.value) && validatepassword(myForm.password.value) && (validateemail(myForm.email.value) || !chk.checked)) { 
    alert("Welcome to your online ATM"); 
    } else { 
    alert("Sorry the information you provided is incorrect"); 
    } 
} 
</script>

來源

2016-11-05 ebramk

'if（username == username）'將始終爲真。你如何期待驗證任何事情？ – Barmar

參數中的「用戶名」會隱藏父作用域中的「用戶名」。 – kube

@Barmar那我該怎麼做呢？用戶名是我希望從中拉出的數組。 – ebramk

您需要爲全球陣列和功能參數，使用不同的名稱。否則，參數變量會影響全局變量，並且不能引用函數內的全局變量。

而要判斷某個數組中是否存在某物的方法是使用indexOf()方法，而不是==。

var all_usernames = ["John", "Mary", "Doe"]; 
var all_pins = ["1452", "7858", "2016"]; // Make it strings, since input values are strings 

function validate_username(username) { 
    return all_usernames.indexOf(username) > -1; 
} 
function validate_pin(pin) { 
    return all_pins.indexOf(pin) > -1; 
}

請注意，具有驗證用戶名和PIN碼的單獨函數不會告訴您用戶是否輸入了正確的PIN碼。例如，如果他們輸入用戶名John，則不會檢查他們是否輸入PIN 1452，它將允許2016或7858。您應該使用單個函數來同時生成兩個值：

function validate_user(username, pin) { 
    var user_index = all_usernames.indexOf(username); 
    if (user_index > -1) { 
     return pin == all_pins[user_index]; 
    } else { 
     return false; 
    } 
}

來源

2016-11-05 00:57:19 Barmar

謝謝你的幫助。我按照你們的建議修正了我的代碼，併發布了我的整個文檔供你查看。它仍然無法正常工作。你能幫忙嗎？ – ebramk

新代碼中沒有'username'變量。您再次爲全局變量和函數參數使用相同的名稱。 – Barmar

請將您的原始代碼放回問題中。讀者需要查看我的答案解決了什麼問題。 – Barmar

從數組驗證表單

回答

相關問題