JavaScript实现表单密码确认-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42236535/article/details/101941297

本文介绍了如何使用JavaScript进行表单验证，确保用户输入的密码和确认密码保持一致，从而提高网页表单的安全性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码

<form id="myForm" action="${pageContext.request.contextPath}/user/save" method="post">
		
		<label for="username" class="col-sm-3 control-label">用户名</label>
		<div class="col-sm-9">
			<input id="username" type="text" class="form-control rounded" placeholder="用户名" name="username" required="required">
		</div>
					
		<label for="password" class="col-sm-3 control-label">密码</label>
		<div class="col-sm-9">
			<input id="password" type="password" class="form-control rounded" placeholder="密码" name="password" required="required">
		</div>
					

		<label for="confirmPassword" class="col-sm-3 control-label">确认密码</label>
		<div class="col-sm-9">
			<input id="confirmPassword" type="password" class="form-control rounded" placeholder="请再次输入密码" required="required" onblur="validate()"><span id="tishi"></span>
		</div>
					
	</form>

js代码

/*验证密码是否一致*/
function validate() {
	var pwd1 = document.getElementById("password").value;
	var pwd2 = document.getElementById("confirmPassword").value;

	<!-- 对比两次输入的密码 -->
	if(pwd1 == pwd2)
	{
		document.getElementById("tishi").innerHTML="<font color='green'>两次密码相同</font>";
		document.getElementById("button").disabled = false;
	}
	else {
		document.getElementById("tishi").innerHTML="<font color='red'>两次密码不相同</font>";
		document.getElementById("button").disabled = true;
	}
}