从数组验证表单

我是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

从数组验证表单

回答

相关问题