Question

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

您需要为全局数组和函数参数使用不同的名称。否则，参数变量会影响全局变量，而不能引用函数内的全局变量。

判断数据是否在数组中的方法是使用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;
    }
}

从Array JavaScript验证表单

1 个答案: