从数组JavaScript验证表单

Question

I'm new to JavaScript and i'm trying to create a login page and have the username and passwords or pins pull from an array. 我是JavaScript的新手，正在尝试创建一个登录页面，并从数组中提取用户名和密码或图钉。 I tried my best to put it together and make it work, but I can't. 我尽力将其组合起来并使其正常工作，但我做不到。 Any help would be appertained. 任何帮助都将得到解决。 At the moment the login form is not pulling from the array. 目前，登录表单尚未从阵列中提取。 Please help. 请帮忙。
original code: 原始代码：

 }
    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;
      }
    }

New updated code( still doesn't run) 新的更新代码（仍然无法运行）

   <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="yourname@email.com" 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>

Answer 1

You need to use different names for the global arrays and the function parameters. 您需要对全局数组和函数参数使用不同的名称。 Otherwise, the parameter variables shadow the global variables, and you can't refer to the global variables inside the functions. 否则，参数变量会遮盖全局变量，并且您不能在函数内部引用全局变量。

And the way to tell if something is in an array is with the indexOf() method, not == . 判断某物是否在数组中的方法是使用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;
}

Note that having separate functions to validate the username and PIN will not tell you if the user entered their correct PIN. 请注意，具有用于验证用户名和PIN的单独功能不会告诉您用户是否输入了正确的PIN。 For instance, if they enter username John , it won't check if they entered PIN 1452 , it will allow 2016 or 7858 as well. 例如，如果他们输入用户名John ，则不会检查他们是否输入PIN 1452 ，它也将允许输入2016或7858 。 You should use a single function to valdate both: 您应该使用一个函数对两个都进行评估：

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;
    }
}

从数组JavaScript验证表单

问题描述

1 个解决方案

解决方案1
4 2016-11-05 00:57:19

从数组JavaScript验证表单

问题描述

1 个解决方案

解决方案1 4 2016-11-05 00:57:19

解决方案1
4 2016-11-05 00:57:19