链接两个页面

Question

我正在尝试将页面链接在一起，因此如果有人使用登录页面登录，他们将被重定向到特定的创建页面，如果用户单击注册按钮，他们将被重定向到注册页面，然后从那里输入信息后，他们将被引导到另一个页面。登录或注册按钮不起作用。有没有办法解决这个问题？

到目前为止，我的登录页面都有这个。

function login() {
  var users = ["admin1", "admin2", "admin3", "admin4"];
  var pass = ["pass1", "pass2", "pass3", "pass4"];

  ivar aUser = document.getElementById("user_name").value;
  var aPass = document.getElementById("password").value;

  for (i = 0; i < users.length; i++) {
    if (users[i] == aUser && pass[i] == aPass) {
      window.location = "dashboard.php";
      break;
    }
  }

  var myOut = document.getElementById("output");
  myOut.innerHTML = "Who Are You? / Incorrect Password";
  myOut.className = "error";

  function init() {
    var login_button = document.getElementById("login_button");
    if (login_button !== null) {
      login_button.onclick = login;
    }

    var register_button = document.getElementById("register_button");
    if (register_button !== null) {
      register_button.onclick = validation;
    }

    for (i = 1; i <= 10; i++) {
      var myErr = document.getElementById("err" + i);
      if (myErr !== null) {
        myErr.className = "error";
      }
    }
  }

<h1>
  Please Login
</h1>
<form id="order_form">
  <fieldset>
    <legend>Login</legend>
    <div class="tab">
      <div class="tRow">
        <div class="tRow">
          <div class="tCell">
            <label for="user_name">User Name:</label>
          </div>
          <div class="tCell">
            <input type="text" id="user_name" maxlength="50" />
          </div>
        </div>
        <!-- END OF THIS SELECTION -->
        <div class="tRow&gt; &lt;div class=">
          <label for="password">Password:</label>
        </div>
        <div class="tCell">
          <input type="text" id="password" required="" maxlength="50" />
        </div>
      </div>
      <!-- END OF THIS SELECTION -->
      <div class="tRow">
        <div class="tCell">
          &nbsp;
        </div>
        <div class="tCell">
          <input type="button" id="login_button" value="Login" />
        </div>

      </div>
      <!--END OF THIS SELECTION-->
      <div class="tRow">
        <div class="tCell">
          &nbsp;
        </div>
        <div class="tCell">
          <input type="button" id="register_button" value="Register Now!" />
        </div>

      </div>
      <!--END OF THIS SELECTION-->
    </div>
    <!-- END OF THE TABLE  -->
    <br />
    <div id="output" class="error"></div>
  </fieldset>
</form>

验证函数：

function validation() {

    for (i=1; i<=10; i++) {
      var myErr = document.getElementById("err" + i); 
      myErr.innerHTML = "";
   }
    document.getElementById("output").innerHTML = "";


        var dept_name = document.getElementById("dept_name").value;
        var user_email = document.getElementById("user_email").value;
        var user_password = document.getElementById("user_password").value;
        var phone_number = document.getElementById("phone_number").value;
        var first_name = document.getElementById("first_name").value;
        var last_name = document.getElementById("last_name").value;
        var office_location = document.getElementById("office_location").value;



        var valid = true;

        if (dept_name == "") {
            document.getElementById("err1").innerHTML = "Invalid!";
            valid = false;
        }

        if ((user_email) =="") {
        valid = false;
        document.getElementById("err2").innerHTML = "Invalid!"; 
        }

        if ((user_password) =="") {
        valid = false;
        document.getElementById("err3").innerHTML = "Invalid!"; 
        }

        if ((first_name) =="") {
        valid = false;
        document.getElementById("err4").innerHTML = "Invalid!"; 
        }

        if ((last_name) =="") {
        valid = false;
        document.getElementById("err5").innerHTML = "Invalid!"; 
        }

        if (isNaN(phone_number) || card_number.length !==11) {
        valid = false;
        document.getElementById("err6").innerHTML = "Invalid!"; 
        }

        if ((office_location) =="") {
        valid = false;
        document.getElementById("err7").innerHTML = "Invalid!"; 
        }
}
window.onload=init;

Answer 1

几个错误

1. 缺少括号
2. 不执行初始化
3. 缺少验证功能

这行得通：

function login() {
  var myOut = document.getElementById("output");

  var users = ["admin1", "admin2", "admin3", "admin4"];
  var pass = ["pass1", "pass2", "pass3", "pass4"];

  var aUser = document.getElementById("user_name").value;
  var aPass = document.getElementById("password").value;

  for (i = 0; i < users.length; i++) {
    if (users[i] == aUser && pass[i] == aPass) {
      myOut.innerHTML = "Correct - you will be redirected";
      setTimeout(function() {
        window.location = "dashboard.php";
      },1000);  
      return;
    }
  }
  myOut.innerHTML = "Who Are You? / Incorrect Password";
  myOut.className = "error";
}


function init() {
  var login_button = document.getElementById("login_button");
  if (login_button !== null) {
    login_button.onclick = login;
  }

  var register_button = document.getElementById("register_button");
  if (register_button !== null) {
    register_button.onclick = validation;
  }

  for (i = 1; i <= 10; i++) {
    var myErr = document.getElementById("err" + i);
    if (myErr !== null) {
      myErr.className = "error";
    }
  }
}
function validation() { /* you need some code here */ }
window.onload=init;

<h1>
  Please Login
</h1>
<form id="order_form">
  <fieldset>
    <legend>Login</legend>
    <div class="tab">
      <div class="tRow">
        <div class="tRow">
          <div class="tCell">
            <label for="user_name">User Name:</label>
          </div>
          <div class="tCell">
            <input type="text" id="user_name" maxlength="50" />
          </div>
        </div>
        <!-- END OF THIS SELECTION -->
        <div class="tRow&gt; &lt;div class=">
          <label for="password">Password:</label>
        </div>
        <div class="tCell">
          <input type="text" id="password" required="" maxlength="50" />
        </div>
      </div>
      <!-- END OF THIS SELECTION -->
      <div class="tRow">
        <div class="tCell">
          &nbsp;
        </div>
        <div class="tCell">
          <input type="button" id="login_button" value="Login" />
        </div>

      </div>
      <!--END OF THIS SELECTION-->
      <div class="tRow">
        <div class="tCell">
          &nbsp;
        </div>
        <div class="tCell">
          <input type="button" id="register_button" value="Register Now!" />
        </div>

      </div>
      <!--END OF THIS SELECTION-->
    </div>
    <!-- END OF THE TABLE  -->
    <br />
    <div id="output" class="error"></div>
  </fieldset>
</form>

您可以使测试更简单：

var userPos = users.indexOf(aUser); 
if (userPos !=-1 && userPos === pass.indexOf(aPass)) {
  ...
}