Javascript跳过if和if else条件，直接跳转到else条件
[英]Javascript skipping the if and if else conditions and directly jumping to else condition
问题描述
I am new to JavaScript and just trying my hands on to JavaScript with a simple login page. 
我是JavaScript新手，只是尝试通过简单的登录页面使用JavaScript。
I have created a login page using HTML and CSS and JavaScript for validations. 我已经使用HTML，CSS和JavaScript创建了一个登录页面以进行验证。 But my JavaScript code is not working properly. 但是我的JavaScript代码无法正常工作。
It is skipping the if conditions and directly jumping to else part and sometimes it is just validating the first if else part for username validation. 它跳过if条件，直接跳到else部分，有时只是验证第一个if else部分以进行用户名验证。
Below is my JavaScript and html code. 以下是我的JavaScript和html代码。 I am using and external JavaScript. 我正在使用外部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>
5 个解决方案
解决方案1
1 2017-01-16 08:32:29
You are using document.getElementsByName("username") method ,From the name (get Elements ByName) of the method itself you come to know that it returns the nodelist collection with name as username. 您正在使用document.getElementsByName（“ username”）方法，从该方法本身的名称（获取Elements ByName）中，您知道该方法返回名称为用户名的节点列表集合。 so you need to give correct index number to get the value. 因此您需要提供正确的索引号才能获取该值。 otherwise you can also use the getElementById() method by defining id for text field in Html. 否则，您还可以通过在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>
解决方案2
0 2017-01-16 08:24:31
Basically you want to add some validation for your username and password. 基本上，您想为用户名和密码添加一些验证。 What you have written in the first if statement is to validate if both are valid and that should be working correctly. 您在第一条if语句中编写的内容是为了验证两者是否均有效并且应该正常工作。
else if(username == null || username == ""){
alert("Please enter CEC ID");
}
This will stop further evaluation if username is not valid. 如果用户名无效，这将停止进一步评估。 In case you want to check if password too is not valid, you will need to write in a different if /else block and not in continuation of the username validation. 万一您想检查密码是否也是无效的，您将需要写一个不同的if / else块，而不要继续进行用户名验证。
解决方案3
0 2017-01-16 08:34:54
You are using document.getElementsByName and according to your code you will get undefined in username and password . 您正在使用document.getElementsByName ，根据您的代码，您将在username和password得到undefined 。 So you need to do this: 因此，您需要这样做：
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: UPDATE1：
If you want to prevent fields not to clear on submit you can do use preventDefault method of the event object like this: 如果要防止在提交时不清除字段，则可以使用事件对象的preventDefault方法，如下所示：
$("#Formid").submit(function(event){
event.preventDefault()
})
OR 要么
$("#Formid").submit(function(event){
e.returnValue = false;
})
解决方案4
0 2017-01-16 08:46:09
try this : 尝试这个 ：
var username = document.getElementsByName("username")[0].value;
var password = document.getElementsByName("password")[0].value;
or set id on your elements and try : 或在您的元素上设置ID并尝试：
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
解决方案5
0 2017-01-16 08:47:56
You should separate validating user input and checking user credentials to make the code clear and easy to read, please refer the code below: 您应分开验证用户输入和检查用户凭据，以使代码清晰易读，请参考以下代码：
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.