的Javascript跳过，如果和其他如果条件和直接跳转到其他条件

我是新来的JavaScript和只是想我的手给JavaScript一个简单的登录页面。的Javascript跳过，如果和其他如果条件和直接跳转到其他条件

我创建使用验证HTML和CSS和JavaScript登录页面。但是我的JavaScript代码无法正常工作。

它跳过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>

来源

2017-01-16 Meenakshi Tyagi

可能重复[Javascript getElementsByName。值不工作]（http://stackoverflow.com/questions/19834804/javascript-getelementsbyname-value-not-working） – JJJ

+也[很好读]（http://stackoverflow.com/q/359494/）。 – Teemu

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

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

如果用户名无效，将停止进一步评估。如果你想检查是否密码太无效，则需要在不同的写的if/else块，而不是在用户名确认的延续。

来源

2017-01-16 08:24:31

您正在使用document.getElementsByName（“username”）方法，从方法本身的名称（获取元素 ByName）您知道它返回名称为username的nodelist集合。所以你需要给出正确的索引号才能得到这个值。否则，你也可以通过在HTML中定义的文本字段标识使用的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>

来源

2017-01-16 08:32:29 vijay

没有objects_的_array但根据[文件]（https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName）一_live节点列表Collection_ – EhsanT

您正在使用document.getElementsByName并根据您的代码，你会得到username和passwordundefined。所以，你需要这样做：

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

来源

2017-01-16 08:34:54

谢谢。您的解决方案工作，但字段用户名和密码重置，任何解决方案？ –

@MeenakshiTyagi你能告诉你如何提交表单吗？你使用jQuery吗？ –

@MeenakshiTyagi在我的答案中检查我的update1。 –

试试这个：

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;

来源

2017-01-16 08:46:09 diamondhna

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

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

来源

2017-01-16 08:47:56

Thankyou ... !!它的工作，但输入的用户名重新点击确定密码提醒。 –

的Javascript跳过，如果和其他如果条件和直接跳转到其他条件

回答

相关问题