Question

我是JavaScript新手，只需使用简单的登录页面尝试使用JavaScript。

我创建了一个使用HTML，CSS和JavaScript进行验证的登录页面。但我的JavaScript代码无法正常工作。

它正在跳过if条件并直接跳转到else部分，有时它只是验证用户名验证的第一个if else部分。

以下是我的JavaScript和HTML代码。我正在使用外部JavaScript。

 function ValidateSignIn() {
   //Variable declarations and initialization
   var username = document.getElementsByName("username").value;
   var password = document.getElementsByName("password").value;

   //Validation of username and password fields
   if (username == "Temp" && password == "123") {
     alert("Login Successful!!");
     window.location = "C:\Users\metyagi\Downloads\Personal data\THE SCM QUIZ\WelcomePage.html";
   } else if (username == null || username == "") {
     alert("Please enter CEC ID");
   } else if (password == null || password == "") {
     alert("Please enter Password");
   } else {
     alert("Username or Password is incorrect, Please try again!!");
   }
 }

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>The SCM Quiz Login Page</title>
  <link rel="stylesheet" type="text/css" href="css\SignIn.css" />
  <script type="text/javascript" src="C:\Users\mt\Downloads\data\test\SignIn.js"></script>
</head>

<body>
  <!--Div for Logo-->
  <Div class="logo">
    <img src="images\logo.png" />
  </Div>

  <!--Div for form-->
  <Div class="loginform">
    <h3>Login </h3>
    <h6>Required fields are marked with *</h6>
    <form method="post" action="" name="SignIn">
      <INPUT TYPE="text" name="username" placeholder="Please Enter Username*">
      </br>
      </br>
      <INPUT TYPE="password" name="password" placeholder="Please Enter Password*">
      </br>
      </br>
      <INPUT TYPE="submit" name="SignIn" value="SIGN IN" onclick="ValidateSignIn()">
      <a href="ForgotPassword.html">Forgot Password?</a>
      <p class="message">Not Registered Yet? <a href="SignUp.html">Sign Up!</a>
      </P>
    </form>
  </Div>
</body>

</html>

Answer 1

您正在使用document.getElementsByName（＆＃34; username＆＃34;）方法，从方法本身的名称（获取元素 ByName）您知道它返回nodelist集合名称为用户名。所以你需要给出正确的索引号来获得值。否则你也可以通过在Html中定义文本字段的id来使用getElementById（）方法。

＆＃13;

function ValidateSignIn() {

  //Variable declarations and initialization
  var username = document.getElementsByName("username")[0].value;
  var password = document.getElementsByName("password")[0].value;

  //Validation of username and password fields
  if (username == "Temp" && password == "123") {
    alert("Login Successful!!");
    window.location = "C:\Users\metyagi\Downloads\Personal data\THE SCM QUIZ\WelcomePage.html";
  } else if (username == null || username == "") {
    alert("Please enter CEC ID");
  } else if (password == null || password == "") {
    alert("Please enter Password");
  } else {
    alert("Username or Password is incorrect, Please try again!!");
  }

}

＆＃13;

<html>
<head>
  <meta charset="utf-8">
  <title>The SCM Quiz Login Page</title>
  <link rel="stylesheet" type="text/css" href="css\SignIn.css" />
  <script type="text/javascript" src="C:\Users\mt\Downloads\data\test\SignIn.js"></script>
</head>

<body>
  <!--Div for Logo-->
  <Div class="logo">
    <img src="images\logo.png" />
  </Div>

  <!--Div for form-->
  <Div class="loginform">
    <h3>Login </h3>
    <h6>Required fields are marked with *</h6>
    <form method="post" action="" name="SignIn">
      <INPUT TYPE="text" name="username" placeholder="Please Enter Username*">
      </br>
      </br>
      <INPUT TYPE="password" name="password" placeholder="Please Enter Password*">
      </br>
      </br>
      <INPUT TYPE="submit" name="SignIn" value="SIGN IN" onclick="ValidateSignIn()">
      <a href="ForgotPassword.html">Forgot Password?</a>

      <p class="message">Not Registered Yet? <a href="SignUp.html">Sign Up!</a>
      </P>
    </form>
  </Div>
</body>

</html>

＆＃13;

Answer 2

基本上你想为你的用户名和密码添加一些验证。您在第一个if语句中编写的内容是验证两者是否有效且应该正常工作。

 else if(username == null || username == ""){
    alert("Please enter CEC ID");       
}

如果用户名无效，这将停止进一步评估。如果你想检查密码是否也无效，你需要写一个不同的if / else块，而不是继续用户名验证。

Answer 3

您使用的是document.getElementsByName，根据您的代码，您将在undefined和username中获得password。所以你需要这样做：

function ValidateSignIn()
{   
    //Variable declarations and initialization
    var username = document.getElementsByName("username")[0].value;
    var password = document.getElementsByName("password")[0].value;

    //Validation of username and password fields
    if(username == "Temp" && password == "123")
    {
        alert("Login Successful!!");
        window.location = "C:\Users\metyagi\Downloads\Personal data\THE SCM QUIZ\WelcomePage.html";     
    }
    else if(username == null || username == "")
    {
        alert("Please enter CEC ID");       
    }
    else if (password == null || password == "")
    {
        alert("Please enter Password");     
    }   
    else
    {
        alert("Username or Password is incorrect, Please try again!!");
    }
}

<强> UPDATE1：

如果您想要阻止字段在提交时不清除，您可以使用事件对象的preventDefault方法，如下所示：

$("#Formid").submit(function(event){
   event.preventDefault()
})

OR

$("#Formid").submit(function(event){
      e.returnValue = false;
    })

Answer 4

试试这个：

var username = document.getElementsByName("username")[0].value;
var password = document.getElementsByName("password")[0].value;

或在元素上设置ID并尝试：

var username = document.getElementById("username").value;
var password = document.getElementById("password").value;

Answer 5

您应该将验证用户输入和检查用户凭据分开以使代码清晰易读，请参阅以下代码：

function ValidateSignIn(){
    var hasError = false;

    //Variable declarations and initialization
    var username = document.getElementsByName("username")[0].value;
    var password = document.getElementsByName("password")[0].value;

    //Validation of username and password fields
    if (!username) { // this will check null, undefined, and empty string
        hasError = true;
        alert("Please enter CEC ID"); 
    } else if (!password) {
        hasError = true;
        alert("Please enter Password");
    }

    if (!hasError) {
        if(username == "Temp" && password == "123"){
            alert("Login Successful!!");
            window.location = "C:\Users\metyagi\Downloads\Personal data\THE SCM QUIZ\WelcomePage.html";     
        } else {
            alert("Username or Password is incorrect, Please try again!!");
        }
    }
}

Javascript跳过if和if else条件并直接跳转到else条件

5 个答案: