为什么 jQuery/JavaScript(classname 或 id).value.length 在验证用户名时不起作用？

Question

document.getElementById("button1").addEventListener("click", mouseOver1);
function mouseOver1(){
   document.getElementById("button1").style.color = "red";
}
document.getElementById("button2").addEventListener("click", mouseOver); 
    function mouseOver(){ 
      document.getElementById("button2").style.color = "purple";
   }
$("#button1").hover(function() {
    $(this).css('cursor','pointer');
}); 
$("#button2").hover(function() {
    $(this).css('cursor','pointer');
}); 
 
 $('#button1').on('click', function () {
   var error = 0; 
   var usernameError = document.getElementById("username_error1");
   var passwordError = document.getElementById("password_error2");
   if ($(".existingUsername").get(0).value != "S0104675") {
   usernameError.innerHTML = "Please enter an existing valid username";
    error = 1; 
    } else {
    usernameError.innerHTML = '';
   } 
   if ($(".existingPassword").get(0).value != "honor433") {
    passwordError.innerHTML = "Please enter an existing valid password";
     error = 1;
   } else {
    passwordError.innerHTML = '';
  }
  if(error == 0)
  {  
     $("#para1").animate({ left: "-100%" });
     $(".username-label").animate({ left: "-105%" });
     $(".existingUsername").animate({ left: "-105%" });
     $(".password-label").animate({ left: "-105%" });
     $(".existingPassword").animate({ left: "-105%" });
     $("#button1").animate({ left: "-105%" });
  }
});
$('#button2').on('click', function () {
var newUsernameError = $("#New_Username_error").html('');
var newPasswordError = $("#New_Password_error").html('');
var newEmailAddressError = $("#New_Email_error").html('');
var newRepeatEmailAddressError = $("#Repeat_Email_error").html('');
// just to make the later conditions easier to read, let's grab all the values into vars:
var newUsername = $('.newUsername').val();
var newPassword = $('.newPassword').val();
var newEmail = $('.newEmail').val();
var repeatEmail = $('.repeatEmail').val();
var errorsFound = false; 
if (newUsername === "") {
  errorsFound = true;
  newUsernameError.html("The username must not be empty.");
} else if (newUsername.length < 6) {
  errorsFound = true;
  newUsernameError.html("The username must be at least 6 characters.");
}
if (newPassword.length < 6) {
  errorsFound = true;
  newPasswordError.html("The password must be at least 6 characters.");
}
if (newEmail === "") {
  errorsFound = true;
  newEmailAddressError.html("The email must not be left empty.");
} else if (!/@/.test(newEmail)) {
  errorsFound = true;
  newEmailAddressError.html("The email must contain an @ symbol.");
}
if (repeatEmail !== newEmail) {
  errorsFound = true;
  newRepeatEmailAddressError.html("This repeat email doesn't equal to the first one entered.");
}
});

.intro h1 {
  font-family: 'Cambria';
  font-size: 16pt;
  font: bold;
  text-align: left;
}
.intro p {
  font-family: 'Calibri';
  font: italic;
  font-size: 12pt;
  padding: 0px 690px 0px 20px;
  text-align: left;
}
.content {
  border: 2px solid;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
#para1 {
  padding: 0px 1050px 0px 20px;
  position: relative; 
}
#para2 {
  padding: 0px 1099px 0px 20px;
  position: relative; 
}
.username-label,
.password-label {
 margin: 10px 0px 0px 350px;
 position: relative; 
 top: -70px; 
}
.existingUsername, 
.existingPassword, 
#username_error1, 
#password_error2
{
    top: -70px; 
     position: relative;       
}
#button1{ 
     background-color: #add8e6;
     margin-left: 425px; 
     position: relative; 
     top: -70px; 
    -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius:10px;
  padding: 0px 20px 0px 20px; 
}
#button2{
  background-color: #add8e6;
  margin-left: -500px; 
  position: relative; 
  top: -30px; 
 -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 0px 20px 0px 20px; 
}
.Username-label1, 
.Password-label2,           
.Email-label3, 
.Repeat-Email-label4 
{
  margin: 0px 0px 0px 330px;
  position: relative; 
  top: -70px; 
}
.newUsername, 
.newPassword, 
.newEmail, 
.repeatEmail{
  position: relative;
   top: -70px;
  margin-left: 40px; 
} 
span{
 color: red; 
 margin-left: 300px;
 position: relative; 
 top: -60px; 
}

<html>
<head>
  <link href="Home.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <title>Project</title>
</head>
<body>
<div class="container">
  <div class="intro">
    <h1>Welcome to Cuyahoga Community College Student Services Online</h1>
    <p>Cuyahoga Community College recognizes students' rights to access personal and academic records in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
  </div>
  <br/>
  <div class="content">
    <div class="row top">
      <p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
      <div class="login">
        <label class="username-label" for="existingUsername">Username</label> 
         <input class="existingUsername" type="text" /><br><span id="username_error1"></span><br>
        <label class="password-label" for="existingPassword">Password</label>
        <input class="existingPassword" type="password"/><br><span id="password_error2"></span><br>
        <button id="button1">Log in</button>
      </div>
    </div>
    <hr/>
    <div class="row bottom">
      <p id="para2">New users, please create a new account by providing us with some basic information.</p>
      <div class= "new_customers_info">
        <label class="Username-label1" for="newUsername">Username</label>
        <input class="newUsername" type="text"/><br><span id="New_Username_error"></span><br>
        <label class="Password-label2" for="newPassword">Password</label>
        <input class="newPassword" type="password"/><br><span id="New_Password_error"></span><br>
        <label class="Email-label3" for="newEmail">Email Address</label>
         <input class="newEmail" type="email"/><br><span id="New_Email_error"></span><br>
        <label class="Repeat-Email-label4" for="repeatEmail">Repeat Email Address</label>
         <input class="repeatEmail" type="email"/><span id="NewReenter_Email_error"></span>
        <button id="button2">Create Account</button>
      </div>
    </div>
  </div>
   <br/>
  <footer>Cuyahoga Community College</footer>
  <footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
</div>
    <script src="Home.js"></script>
</body>
</html>

我正在验证(下半部分(文本框，但在尝试验证用户名文本框时遇到了问题。例如，在我的第一个 if 条件下使用 value.length(我将其更改为长度(。

当我单击"创建帐户"按钮时，它不会执行任何操作(我知道只有当用户名至少为 6 个字符时，它现在才不应该执行任何操作，但是当我执行 className 或 Id.length 时它可以工作(但由于某种原因它会显示错误消息，即使我在文本框内有正确长度的单词或更多。

这是我的代码。

Answer 1

而不是$(".newUsername").length使用$(".newUsername").val().length。

编辑：

我想听从@Stephen P的善意建议。 $(".newUsername") 返回满足.newUsername选择器的所有元素的数组，或具有newUsername类的所有元素。 $(".newUsername").length返回数组的长度，在本例中返回具有该类的元素数。

但是，$(".newUsername").val()获取输入的值，这是一个字符串。 $(".newUsername").val().length 返回字符串的长度，即您尝试检索的值。