用户登录模拟器js验证用户名和密码失败

Question

用于验证输入的字符串。

no if条件在js代码中起作用，但是else if条件，请求帮助。

html代码：

<div>
    <h2 class="title">login</h2>
    <p>usernamehere：</p>
    <input type="text" name="username" id="username" placeholder="login">
    <p>passwordhere：</p>
    <input type="password" name="userpassword" id="userpswd" placeholder="password">
    <button id="login">login</button>
</div>
<script src="jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>

js代码：

var userenter = $("#username").val()
var pswdenter = $("#userpswd").val()
$("#login").click(function(){
    if(userenter == "letsstart" && pswdenter == "start"){
        alert("pass");
    }
    else if(userenter == "" || pswdenter == ""){
        alert("enter please")
      }
    else{
        alert("invalid")
    }
});

Answer 1

您应该在单击处理程序中读取username和password的.val，而不是全局。否则，它将具有输入的文档初始加载值。这就是为什么每次你得到空输入的原因

​

$("#login").click(function() {
  var userenter = $("#username").val()  //
  var pswdenter = $("#userpswd").val()  //
  console.log(userenter,pswdenter)
  if (userenter == "letsstart" && pswdenter == "start") {
    alert("pass");
  } else if (userenter == "" || pswdenter == "") {
    alert("enter please")
  } else {
    alert("invalid")
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h2 class="title">login</h2>
  <p>usernamehere：</p>
  <input type="text" name="username" id="username" placeholder="login">
  <p>passwordhere：</p>
  <input type="password" name="userpassword" id="userpswd" placeholder="password">
  <button id="login">login</button>
</div>

​

Answer 2

您将检索一次username和userpswd的值，然后在单击处理程序中使用它。所以if语句总是查看第一次设置的值(可能是在页面加载时)。

您应该将值检索代码移到您的click处理程序中。

$("#login").click(function(){
    var userenter = $("#username").val()
    var pswdenter = $("#userpswd").val()
    ...
});

Answer 3

您必须在每次单击“登录”按钮时获取#username和#userpswd的值。否则，当您检查凭据是否有效时，userenter和pswdenter将为空，因为当您定义它们时，#username和#userpswd输入为空。我不知道它是否得到了很好的解释，但下面是代码：

​

$("#login").click(function(){
    var userenter = $("#username").val()
    var pswdenter = $("#userpswd").val()
    
    if(userenter == "letsstart" && pswdenter == "start"){
        alert("pass");
    }
    else if(userenter == "" || pswdenter == ""){
        alert("enter please")
      }
    else{
        alert("invalid")
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <h2 class="title">login</h2>
    <p>usernamehere：</p>
    <input type="text" name="username" id="username" placeholder="login">
    <p>passwordhere：</p>
    <input type="password" name="userpassword" id="userpswd" placeholder="password">
    <button id="login">login</button>
</div>
<script src="jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>

​