Javascript 登录系统检查是否 ("UserPassword") == Undefined 不工作

Question

所以基本上在一个 html 文件中，我有一个输入字段，id 为“UserPassword”。在我的 .js 文件中，我有一个函数 register()，它检查您是否已注册，如果没有，如果这是您第一次登录。如果没有，那么它会检查您输入的密码是否 == undefined。如果是，它会显示“无效的用户名或密码”。在控制台日志中。

我是如何设置它的，当函数 register() 运行时，当它到达 (FirstTimeLoggedIn == "No"else 语句时，它确实if ("UserPassword"= undefined"), 那么它会告诉你“无效的用户名或密码。问题是，它没有正确地做到这一点。 无论我是否在输入中输入了密码，它仍然显示“无效的用户名或密码”

这是代码:整个脚本，除了登录和注销按钮外没有其他内容。是的，我也计划在登录按钮上实现它，但我需要先让它工作。

var Date = Date()
let Username = undefined
let Password = undefined
let LoggedIn = "No"
let CorrectPassword = undefined
let FirstTimeLoggingIn = "Yes"
let Registered = "No"
let ConsoleMessage = undefined

//Hello Message
console.log("Welcome to the Cosmic Online Interactable Interface, or COII.");
ConsoleMessage = "Welcome to Cosmic."
document.getElementById('content').innerHTML = (ConsoleMessage);

//Registration Function                                                  
function register() {                                                 
    if (Registered == "Yes") {
        console.log("Already Registered");
        ConsoleMessage = "Already Registered."
        document.getElementById('content').innerHTML = (ConsoleMessage)
    } 
    else if (FirstTimeLoggingIn == "No") {
            console.log("Account Already Registered.");
        ConsoleMessage = "Account Already Registered.";
        document.getElementById('content').innerHTML = (ConsoleMessage);
        }
         else {
            document.getElementById("UserPassword".value)
                if  ("UserPassword" == undefined) {
        console.log("Invalid Username or Password.");
        ConsoleMessage = "Invalid Username or Password.";
        document.getElementById('content').innerHTML = (ConsoleMessage);
                }
            
                 else {
            console.log("Registered at: " + Date);
            Username = document.getElementById("UserUsername").value;
            Password = document.getElementById("UserPassword").value;
            console.log("Welcome, " + Username);
        ConsoleMessage = "Welcome, " + Username;
        document.getElementById('content').innerHTML = (ConsoleMessage);
        Registered = "Yes";
        FirstTimeLoggingIn = "No";
        LoggedIn = "Yes";
        CorrectPassword = Password;
        //redirect to account page
        setTimeout(() => {  window.location.href = "Home.html"; }, 2000);
        console.log("Redirecting to Home Page");
        ConsoleMessage = "Redirecting to Home Page";
        document.getElementById('content').innerHTML = (ConsoleMessage);
         }
        }
    }


//Login Function  // Login is WIP

function login() {
    if (Registered == "No") {
     console.log("Not Registered.");
     ConsoleMessage = "Not Registered."
     document.getElementById('content').innerHTML = (ConsoleMessage)
    }
    if (LoggedIn == "Yes") {
        console.log("Already Logged In, " + Username);
           ConsoleMessage = "Already Logged In, " + Username
           document.getElementById('content').innerHTML = (ConsoleMessage)
        }
    
    if (Registered == "Yes" && LoggedIn == "No")
     {
         //if (LoggedIn == "No")
        console.log("Welcome, " + Username);
        ConsoleMessage = "Welcome, " + Username
        console.log("Logged In At: " + Date)
        document.getElementById('content').innerHTML = (ConsoleMessage)
        LoggedIn = "Yes"
        //redirect to account page
        setTimeout(() => {  window.location.href = "home.html"; }, 2000);
        console.log("Redirecting to Home Page");
        ConsoleMessage = "Redirecting to Home Page";
        document.getElementById('content').innerHTML = (ConsoleMessage);
     }
}

//Log Out Function.
function LogOut() {
if (LoggedIn == "No") {
    console.log("Not Logged In.");
        ConsoleMessage = "Not Logged In."
        document.getElementById('content').innerHTML = (ConsoleMessage)
} else {
    LoggedIn = "Yes"
    console.log("Logged Out " + Username);
        ConsoleMessage = "Logged Out " + Username;
        document.getElementById('content').innerHTML = (ConsoleMessage)
        LoggedIn = "No"
        console.log("Logged Out At: " + Date)
    }
}```

Answer 1

如果用户将任何输入字段留空，则大部分值将为 empty，这意味着如果您在输入中使用 length 属性，您将得到 < strong>零作为用户输入的长度。

这里不需要检查 NULL 或 undefined，但如果需要，您仍然可以检查相同的内容。

document.getElementById("register-user").addEventListener("click", register);

function register() {


  let userName = document.getElementById("user-name");
  let userPassword = document.getElementById("user-password");

  if (userName.value == undefined || 
      userName.value == null || 
      userName.value.length == 0) {

          console.log("Please provide user name");
  }
  else if (userPassword.value == undefined || 
           userPassword.value == null || 
           userPassword.value.length == 0) {
 
             console.log("Please provide user password");
  }
  else {
      console.log("Everything is fine. You can register user.");  
  }
}

<input type="text" id="user-name" placeholder="Enter User Name" />
<br /><br />
<input type="password" id="user-password" placeholder="Enter User Password" />
<br /><br />
<button id="register-user">Register</button>

如果您想减少一些代码行，可以使用感叹号 (!) 符号，称为bang，它是逻辑 NOT 运算符。

可以替换

 userName.value == undefined || 
 userName.value == null || 
 userName.value.length == 0

到

!userName

为了

userPassword.value == undefined || 
userPassword.value == null || 
userPassword.value.length == 0

到

!userPassword

它会将所有内容评估为空字符串 ("")、NULL、undefined、false。

document.getElementById("register-user").addEventListener("click", register);

function register() {


  let userName = document.getElementById("user-name");
  let userPassword = document.getElementById("user-password");

  if (!userName.value) {
     console.log("Please provide user name");
  }
  else if (!userPassword.value) {
      console.log("Please provide user password");
  }
  else {
      console.log("Everything is fine. You can register user.");  
  }
}

<input type="text" id="user-name" placeholder="Enter User Name" />
<br /><br />
<input type="password" id="user-password" placeholder="Enter User Password" />
<br /><br />
<button id="register-user">Register</button>

因此，通过使用感叹号 (!)，您可以更灵活地针对各种范围的用户输入进行更改。