Jquery代码不能用于密码确认

时间：2017-07-30 10:39:43

标签： javascript jquery html css 

<html>
<head>
	<title>Register</title>
	<style>
		.content{
			position: relative;
			top: 130px;
			border:3px solid black;
			padding: 50px;
			width:300px;
			margin: auto auto 200px auto;
			align: center;
			}
		
		body{
			background-image: url(Register.jpg);
			background-size: cover;
			}
		.s1{
			float:left;
			}
		.s2{
			float:right;
			}
		.s3 {
			margin-left: 110px;
			}
		.s4{
			margin-left: 90px;
			}
		.s4 a{
			color: black;
			font-size: 12;
			}
		.s4 a:hover{
			color: blue;
			}
		p{
			font-size: 12;
			color: red;				
			}
		.d1{
			margin-left:
			}
	</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$("#pass , #pass1").on("keyup", function () {
	  if ($("#pass").val() == $("#pass").val()) {
	    $("#pass1").css("border", "3px solid green");
	  } else 
	    $("#pass1").css("border", "3px solid red");
	});
</script>
</head>
<body>
	<jsp:include page="header.html"/>
	<div class="container">
		<div class="content">
			<form class="page" method="post" action="RegisterPage" name="register">
				<span class="s1">
					First Name
				</span>
				<span class="s2">
					<input name="firstname" placeholder="Firstname" id="firstname" required>
				</span>
				<br><br>
				<span class="s1">
					Last Name
				</span>
				<span class="s2">
					<input name="lastname" placeholder="Lastname" id="lastname" required>
				</span>
				<br><br>
				<span class="s1">
					Date of Birth
				</span>
				<span class="s2">
					<input id = "input1" name="dob" type="date" placeholder="DD-MM-YYYY" id="date" required>
				</span>
				<br><br>
				<span class="s1">
					Gender
				</span>
				<span class="s2">
					<input id = "input2" type="radio" name="gen" value="Male" required>Male 
					<input id = "input2" type="radio" name="gen" value="Female">Female 
				</span>
				<br><br>
				<span class="s1">
					Membership Type
				</span>
				<span class="s2">
					<input id = "input2" type="radio" name="mem" value="Librarian" required>Librarian
					<input id = "input2" type="radio" name="mem" value="Member">Member
				</span>
				<br><br>
				<span class="s1">
					Address
				</span>
				<span class="s2">
					<input name="addr" placeholder="Address First Line" id="addr" required>
				</span>
				<br><br>
				<span class="s1">
					Contact Number
				</span>
				<span class="s2">
					<input id = "input1" name="c_no" type="number" placeholder="9999888777" id="c_no" required>
				</span>
				<br><br>
				<span class="s1">
					Email ID
				</span>
				<span class="s2">
					<input name="loginID" type="email" placeholder="abc@def.com" id="loginID" required>
				</span>
				<br><br>
				<span class="s1">
					Username
				</span>
				<span class="s2">
					<input name="username" placeholder="Username" id="username" required>
				</span>
				<br><br>
				<span class="s1">
					Password
				</span>
				<span class="s2">
					<input name="password" type = "password" placeholder="Password" id="pass" required>
				</span>
				<br><br>
				<span class="s1">
					Confirm Password
				</span>
				<span class="s2">
					<input name="password1" type="password" placeholder="Confirm Password" id="pass1" required>
				</span>
				<br>
				<div class="d1"><p>${error}</p></div>
				<br><br>
				<span class="s3"><input type="submit" value="Register" onClick="check()"></span>
				<br><br>
				<span class="s4">
				<a href="Login.jsp">Already a user!! Login</a>
				</span>
			</form>
		</div>
	</div>
	<jsp:include page="footer.html"/>
</body>
</html>

代码无法正常工作。当两个密码相等时，它应该显示 GREEN 边框，当你的aren，t时，它应该显示 RED 边框。但它没有用。我正在开发eclipse IDE 。在此先感谢!!

我尝试过更改ID但是没有用。是否有不同的名称和id影响jquery语句？

4 个答案:

答案 0 :(得分：1)

您的错误： 

if ($("#pass").val() == $("#pass").val()) {
                               ^---------------------

更改为： 

if ($("#pass").val() == $("#pass1").val()) {
                               ^---------------------

＆＃13;
＆＃13; 
$(document).ready(function(){
  $("#pass , #pass1").on("keyup", function () {
    if ($("#pass").val() == $("#pass1").val()) {
      $("#pass1").css("border", "3px solid green");
    }
    else 
      $("#pass1").css("border", "3px solid red");
  });
})
＆＃13; 
.content{
			position: relative;
			top: 130px;
			border:3px solid black;
			padding: 50px;
			width:300px;
			margin: auto auto 200px auto;
			align: center;
			}
		
		body{
			background-image: url(Register.jpg);
			background-size: cover;
			}
		.s1{
			float:left;
			}
		.s2{
			float:right;
			}
		.s3 {
			margin-left: 110px;
			}
		.s4{
			margin-left: 90px;
			}
		.s4 a{
			color: black;
			font-size: 12;
			}
		.s4 a:hover{
			color: blue;
			}
		p{
			font-size: 12;
			color: red;				
			}
		.d1{
			margin-left:
			}
＆＃13; 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<jsp:include page="header.html"/>
  <div class="container">
    <div class="content">
      <form class="page" method="post" action="RegisterPage" name="register">
        <span class="s1">
          First Name
        </span>
        <span class="s2">
          <input name="firstname" placeholder="Firstname" id="firstname" required>
        </span>
        <br><br>
        <span class="s1">
          Last Name
        </span>
        <span class="s2">
          <input name="lastname" placeholder="Lastname" id="lastname" required>
        </span>
        <br><br>
        <span class="s1">
          Date of Birth
        </span>
        <span class="s2">
          <input id = "input1" name="dob" type="date" placeholder="DD-MM-YYYY" id="date" required>
        </span>
        <br><br>
        <span class="s1">
          Gender
        </span>
        <span class="s2">
          <input id = "input2" type="radio" name="gen" value="Male" required>Male 
          <input id = "input2" type="radio" name="gen" value="Female">Female 
        </span>
        <br><br>
        <span class="s1">
          Membership Type
        </span>
        <span class="s2">
          <input id = "input2" type="radio" name="mem" value="Librarian" required>Librarian
          <input id = "input2" type="radio" name="mem" value="Member">Member
        </span>
        <br><br>
        <span class="s1">
          Address
        </span>
        <span class="s2">
          <input name="addr" placeholder="Address First Line" id="addr" required>
        </span>
        <br><br>
        <span class="s1">
          Contact Number
        </span>
        <span class="s2">
          <input id = "input1" name="c_no" type="number" placeholder="9999888777" id="c_no" required>
        </span>
        <br><br>
        <span class="s1">
          Email ID
        </span>
        <span class="s2">
          <input name="loginID" type="email" placeholder="abc@def.com" id="loginID" required>
        </span>
        <br><br>
        <span class="s1">
          Username
        </span>
        <span class="s2">
          <input name="username" placeholder="Username" id="username" required>
        </span>
        <br><br>
        <span class="s1">
          Password
        </span>
        <span class="s2">
          <input name="password" type = "password" placeholder="Password" id="pass" required>
        </span>
        <br><br>
        <span class="s1">
          Confirm Password
        </span>
        <span class="s2">
          <input name="password1" type="password" placeholder="Confirm Password" id="pass1" required>
        </span>
        <br>
        <div class="d1"><p>${error}</p></div>
        <br><br>
        <span class="s3"><input type="submit" value="Register" onClick="check()"></span>
        <br><br>
        <span class="s4">
        <a href="Login.jsp">Already a user!! Login</a>
        </span>
      </form>
    </div>
  </div>
＆＃13;
＆＃13;
＆＃13;

您也可以使用input事件，例如： 

$(document).ready(function(){
  $("#pass , #pass1").on("input", function () {
    if ($("#pass").val() == $("#pass1").val()) {
      $("#pass1").css("border", "3px solid green");
    }
    else 
      $("#pass1").css("border", "3px solid red");
  });
})

＆＃13;
＆＃13; 
$(document).ready(function(){
  $("#pass , #pass1").on("input", function () {
    if ($("#pass").val() == $("#pass1").val()) {
      $("#pass1").css("border", "3px solid green");
    }
    else 
      $("#pass1").css("border", "3px solid red");
  });
})
＆＃13; 
.content {
  position: relative;
  top: 130px;
  border:3px solid black;
  padding: 50px;
  width:300px;
  margin: auto auto 200px auto;
  text-align: center;
}
    
body {
  background-image: url(Register.jpg);
  background-size: cover;
}

.s1 {
  float:left;
}

.s2 {
  float:right;
}

.s3 {
  margin-left: 110px;
}

.s4 {
  margin-left: 90px;
}

.s4 a {
  color: black;
  font-size: 12;
}

.s4 a:hover {
  color: blue;
}

p {
  font-size: 12;
  color: red;       
}

.d1{
  margin-left:
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<jsp:include page="header.html"/>
  <div class="container">
    <div class="content">
      <form class="page" method="post" action="RegisterPage" name="register">
        <span class="s1">
          First Name
        </span>
        <span class="s2">
          <input name="firstname" placeholder="Firstname" id="firstname" required>
        </span>
        <br><br>
        <span class="s1">
          Last Name
        </span>
        <span class="s2">
          <input name="lastname" placeholder="Lastname" id="lastname" required>
        </span>
        <br><br>
        <span class="s1">
          Date of Birth
        </span>
        <span class="s2">
          <input id = "input1" name="dob" type="date" placeholder="DD-MM-YYYY" id="date" required>
        </span>
        <br><br>
        <span class="s1">
          Gender
        </span>
        <span class="s2">
          <input id = "input2" type="radio" name="gen" value="Male" required>Male 
          <input id = "input2" type="radio" name="gen" value="Female">Female 
        </span>
        <br><br>
        <span class="s1">
          Membership Type
        </span>
        <span class="s2">
          <input id = "input2" type="radio" name="mem" value="Librarian" required>Librarian
          <input id = "input2" type="radio" name="mem" value="Member">Member
        </span>
        <br><br>
        <span class="s1">
          Address
        </span>
        <span class="s2">
          <input name="addr" placeholder="Address First Line" id="addr" required>
        </span>
        <br><br>
        <span class="s1">
          Contact Number
        </span>
        <span class="s2">
          <input id = "input1" name="c_no" type="number" placeholder="9999888777" id="c_no" required>
        </span>
        <br><br>
        <span class="s1">
          Email ID
        </span>
        <span class="s2">
          <input name="loginID" type="email" placeholder="abc@def.com" id="loginID" required>
        </span>
        <br><br>
        <span class="s1">
          Username
        </span>
        <span class="s2">
          <input name="username" placeholder="Username" id="username" required>
        </span>
        <br><br>
        <span class="s1">
          Password
        </span>
        <span class="s2">
          <input name="password" type = "password" placeholder="Password" id="pass" required>
        </span>
        <br><br>
        <span class="s1">
          Confirm Password
        </span>
        <span class="s2">
          <input name="password1" type="password" placeholder="Confirm Password" id="pass1" required>
        </span>
        <br>
        <div class="d1"><p>${error}</p></div>
        <br><br>
        <span class="s3"><input type="submit" value="Register" onClick="check()"></span>
        <br><br>
        <span class="s4">
        <a href="Login.jsp">Already a user!! Login</a>
        </span>
      </form>
    </div>
  </div>
  <jsp:include page="footer.html">
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我认为您与Pass word匹配并确认密码，必须是：

if ($("#pass").val() == $("#pass1").val())

答案 2 :(得分：0)

以下是您的代码的更新工作版本：

＆＃13;
＆＃13; 
$("#pass,#pass1").on("keyup", function() {
  if ($("#pass").val() == $("#pass1").val())
    $("#pass1").css("border", "3px solid green");
  else
    $("#pass1").css("border", "3px solid red");
});
＆＃13; 
.content {
  position: relative;
  top: 130px;
  border: 3px solid black;
  padding: 50px;
  width: 300px;
  margin: auto auto 200px auto;
  align: center;
}

body {
  background-image: url(Register.jpg);
  background-size: cover;
}

.s1 {
  float: left;
}

.s2 {
  float: right;
}

.s3 {
  margin-left: 110px;
}

.s4 {
  margin-left: 90px;
}

.s4 a {
  color: black;
  font-size: 12;
}

.s4 a:hover {
  color: blue;
}

p {
  font-size: 12;
  color: red;
}

.d1 {
  margin-left:
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="content">
    <form class="page" method="post" action="RegisterPage" name="register">
      <span class="s1">
First Name
</span>
      <span class="s2">
<input name="firstname" placeholder="Firstname" id="firstname" required>
</span>
      <br><br>
      <span class="s1">
Last Name
</span>
      <span class="s2">
<input name="lastname" placeholder="Lastname" id="lastname" required>
</span>
      <br><br>
      <span class="s1">
Date of Birth
</span>
      <span class="s2">
<input id = "input1" name="dob" type="date" placeholder="DD-MM-YYYY" id="date" required>
</span>
      <br><br>
      <span class="s1">
Gender
</span>
      <span class="s2">
<input id = "input2" type="radio" name="gen" value="Male" required>Male 
<input id = "input2" type="radio" name="gen" value="Female">Female 
</span>
      <br><br>
      <span class="s1">
Membership Type
</span>
      <span class="s2">
<input id = "input2" type="radio" name="mem" value="Librarian" required>Librarian
<input id = "input2" type="radio" name="mem" value="Member">Member
</span>
      <br><br>
      <span class="s1">
Address
</span>
      <span class="s2">
<input name="addr" placeholder="Address First Line" id="addr" required>
</span>
      <br><br>
      <span class="s1">
Contact Number
</span>
      <span class="s2">
<input id = "input1" name="c_no" type="number" placeholder="9999888777" id="c_no" required>
</span>
      <br><br>
      <span class="s1">
Email ID
</span>
      <span class="s2">
<input name="loginID" type="email" placeholder="abc@def.com" id="loginID" required>
</span>
      <br><br>
      <span class="s1">
Username
</span>
      <span class="s2">
<input name="username" placeholder="Username" id="username" required>
</span>
      <br><br>
      <span class="s1">
Password
</span>
      <span class="s2">
<input name="password" type = "password" placeholder="Password" id="pass" required>
</span>
      <br><br>
      <span class="s1">
Confirm Password
</span>
      <span class="s2">
<input name="password1" type="password" placeholder="Confirm Password" id="pass1" required>
</span>
      <br>
      <div class="d1">
        <p>${error}</p>
      </div>
      <br><br>
      <span class="s3"><input type="submit" value="Register" onClick="check()"></span>
      <br><br>
      <span class="s4">
<a href="Login.jsp">Already a user!! Login</a>
</span>
    </form>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

使用这个：

＆＃13;
＆＃13; 
$("#pass , #pass1").on("input", function () {

	  if ($("#pass").val() == $("#pass1").val()) {
	    $("#pass1").css("border", "3px solid green");
	  } else 
	    $("#pass1").css("border", "3px solid red");
	});
＆＃13; 
.content{
			position: relative;
			top: 130px;
			border:3px solid black;
			padding: 50px;
			width:300px;
			margin: auto auto 200px auto;
			align: center;
			}
		
		body{
			background-image: url(Register.jpg);
			background-size: cover;
			}
		.s1{
			float:left;
			}
		.s2{
			float:right;
			}
		.s3 {
			margin-left: 110px;
			}
		.s4{
			margin-left: 90px;
			}
		.s4 a{
			color: black;
			font-size: 12;
			}
		.s4 a:hover{
			color: blue;
			}
		p{
			font-size: 12;
			color: red;				
			}
		.d1{
			margin-left:
			}
＆＃13; 
<html>
<head>
	<title>Register</title>
	<style>
		
	</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
<body>
	<jsp:include page="header.html"/>
	<div class="container">
		<div class="content">
			<form class="page" method="post" action="RegisterPage" name="register">
				<span class="s1">
					First Name
				</span>
				<span class="s2">
					<input name="firstname" placeholder="Firstname" id="firstname" required>
				</span>
				<br><br>
				<span class="s1">
					Last Name
				</span>
				<span class="s2">
					<input name="lastname" placeholder="Lastname" id="lastname" required>
				</span>
				<br><br>
				<span class="s1">
					Date of Birth
				</span>
				<span class="s2">
					<input id = "input1" name="dob" type="date" placeholder="DD-MM-YYYY" id="date" required>
				</span>
				<br><br>
				<span class="s1">
					Gender
				</span>
				<span class="s2">
					<input id = "input2" type="radio" name="gen" value="Male" required>Male 
					<input id = "input2" type="radio" name="gen" value="Female">Female 
				</span>
				<br><br>
				<span class="s1">
					Membership Type
				</span>
				<span class="s2">
					<input id = "input2" type="radio" name="mem" value="Librarian" required>Librarian
					<input id = "input2" type="radio" name="mem" value="Member">Member
				</span>
				<br><br>
				<span class="s1">
					Address
				</span>
				<span class="s2">
					<input name="addr" placeholder="Address First Line" id="addr" required>
				</span>
				<br><br>
				<span class="s1">
					Contact Number
				</span>
				<span class="s2">
					<input id = "input1" name="c_no" type="number" placeholder="9999888777" id="c_no" required>
				</span>
				<br><br>
				<span class="s1">
					Email ID
				</span>
				<span class="s2">
					<input name="loginID" type="email" placeholder="abc@def.com" id="loginID" required>
				</span>
				<br><br>
				<span class="s1">
					Username
				</span>
				<span class="s2">
					<input name="username" placeholder="Username" id="username" required>
				</span>
				<br><br>
				<span class="s1">
					Password
				</span>
				<span class="s2">
					<input name="password" type = "password" placeholder="Password" id="pass" required>
				</span>
				<br><br>
				<span class="s1">
					Confirm Password
				</span>
				<span class="s2">
					<input name="password1" type="password" placeholder="Confirm Password" id="pass1" required>
				</span>
				<br>
				<div class="d1"><p>${error}</p></div>
				<br><br>
				<span class="s3"><input type="submit" value="Register" onClick="check()"></span>
				<br><br>
				<span class="s4">
				<a href="Login.jsp">Already a user!! Login</a>
				</span>
			</form>
		</div>
	</div>
	<jsp:include page="footer.html"/>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题