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

时间：2017-05-09 00:30:33

标签： javascript jquery html css

＆＃13;
＆＃13; 
<h1>flexy flex</h1>
<div class="groups">
  <div class="height-ruler"></div>
  <div class="group">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="group">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="group">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="group">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="group">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="group">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="group">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="group">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="group">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="group">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
＆＃13; 
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.");
}

});
＆＃13; 
.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; 
}
＆＃13;
＆＃13;
＆＃13;

我正在验证（下部）文本框，我在尝试验证用户名文本框时遇到了问题。例如，在我的第一个条件中使用<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>（我更改为长度）。

当我点击“创建帐户”时，按钮，它没有做任何事情（我知道它现在不应该做任何事情只有当用户名至少是6个字符，但是当我做className或Id.length它有效）但由于某种原因它显示错误消息，即使我在文本框中有正确的单词长度或更多。

这是我的代码。

1 个答案:

答案 0 :(得分：3)

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

修改

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

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

相关问题
最新问题