簡體   English   中英

Javascript跳過if和if else條件,直接跳轉到else條件

[英]Javascript skipping the if and if else conditions and directly jumping to else condition

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

您正在使用document.getElementsByName(“ username”)方法,從該方法本身的名稱(獲取Elements ByName)中,您知道該方法返回名稱為用戶名的節點列表集合。 因此您需要提供正確的索引號才能獲取該值。 否則,您還可以通過在HTML中為文本字段定義ID來使用getElementById()方法。

 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!!"); } } 
 <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> 

基本上,您想為用戶名和密碼添加一些驗證。 您在第一條if語句中編寫的內容是為了驗證兩者是否均有效並且應該正常工作。

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

如果用戶名無效,這將停止進一步評估。 萬一您想檢查密碼是否也是無效的,您將需要寫一個不同的if / else塊,而不要繼續進行用戶名驗證。

您正在使用document.getElementsByName ,根據您的代碼,您將在usernamepassword得到undefined 因此,您需要這樣做:

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()
})

要么

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

嘗試這個 :

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;

您應分開驗證用戶輸入和檢查用戶憑據,以使代碼清晰易讀,請參考以下代碼:

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!!");
        }
    }
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM