javascript - 验证用户名时，为什么jQuery/JavaScript(类名或ID).value.length不起作用？

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时，的作品），但由于某种原因，即使我在文本框中包含正确的单词长度或更多，它也会显示错误消息。

这是我的代码。

最佳答案

代替$(".newUsername").length使用$(".newUsername").val().length。

编辑：

我想遵循@Stephen P的善意建议。 $(".newUsername")返回一个满足.newUsername选择器的所有元素或具有newUsername类的所有元素的数组。 $(".newUsername").length返回数组的长度，在这种情况下，返回具有该类的元素的数量。

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

关于javascript - 验证用户名时，为什么jQuery/JavaScript(类名或ID).value.length不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43859224/