个人中心
gpt4 book ai didi

javascript - Jquery 代码不适用于密码确认

转载 作者：太空宇宙 更新时间：2023-11-04 08:23:04 26 4
gpt4 key购买 nike 

<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 边框，当密码不相等时显示RED 边框。但它不起作用。我正在使用 Eclipse IDE。提前致谢!!

我试过更改 ID，但没有用。使用不同的名称和 ID 会影响 jquery 语句吗？

最佳答案

你的错误:

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

更改为:

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

$(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");
  });
}) 
.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:
			}
  <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>

你也可以使用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");
  });
})

$(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");
  });
})
.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:
}
<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">

关于javascript - Jquery 代码不适用于密码确认，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45398930/

26 4 0
文章推荐： python - 无法退出 python 循环
文章推荐： Java unicode 操作
文章推荐： python - 我应该如何处理软件包？
文章推荐： javascript - symfony 中的 Bootstrap 模板
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com