设置密码不能小于6位数确认密码于输入的密码不一致则提示两次输入的两次密码不一致!DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 titleTitletitle style #d1 width 600px; height 200px; backgroun
以下是更新后的HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
width: 600px;
height: 200px;
background-color: cadetblue;
margin: 10px auto;
}
#d1_head {
color: white;
font-size: 24px;
height: 30px;
padding-left: 10px;
padding-right: 10px;
background-color: cornflowerblue;
line-height: 30px;
}
#d1_content {
padding-left: 10px;
padding-right: 10px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d1_head">注册</div>
<div id="d1_content">
<form action="xxxPHP">
<table>
<tr>
<td>用户名：</td>
<td>
<input type="text" placeholder="请输入邮箱">
<span id="emailError" style="display: none">邮箱不合法</span>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" placeholder="密码包含数组字符和数字" id="passwordInput">
</td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input type="password" placeholder="密码包含数组字符和数字" id="confirmPasswordInput">
<span id="passwordError" style="display: none">两次输入的密码不一致</span>
</td>
</tr>
<tr>
<td>身份证号：</td>
<td>
<input type="text" placeholder="请输入合法的身份证号码" id="idInput">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交" id="submitBtn">
</td>
</tr>
</table>
</form>
</div>
</div>
<script>
//获取用户名输入框
let emailInput = document.querySelector("input[type='text']");
//获取邮箱不合法提示元素
let emailErrorSpan = document.querySelector("#emailError");
//获取密码输入框
let passwordInput = document.querySelector("#passwordInput");
//获取确认密码输入框
let confirmPasswordInput = document.querySelector("#confirmPasswordInput");
//获取密码不一致提示元素
let passwordErrorSpan = document.querySelector("#passwordError");
//获取身份证号输入框
let idInput = document.querySelector("#idInput");
//获取提交按钮元素
let submitBtn = document.querySelector("#submitBtn");
//给用户名输入框绑定失去焦点事件
emailInput.addEventListener('blur', function () {
//获取输入的邮箱
let email = emailInput.value;
//使用正则表达式校验邮箱格式
let emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailPattern.test(email)) {
emailErrorSpan.style.display = 'inline';//显示错误提示
} else {
emailErrorSpan.style.display = 'none';//隐藏错误提示
}
});
//给确认密码输入框绑定失去焦点事件
confirmPasswordInput.addEventListener('blur', function () {
let password = passwordInput.value;
let confirmPassword = confirmPasswordInput.value;
if (password !== confirmPassword) {
passwordErrorSpan.style.display = 'inline';//显示错误提示
} else {
passwordErrorSpan.style.display = 'none';//隐藏错误提示
}
});
//给提交按钮绑定点击事件
submitBtn.addEventListener('click', function (event) {
let password = passwordInput.value;
let confirmPassword = confirmPasswordInput.value;
if (password.length < 6) {
event.preventDefault();//阻止表单提交
alert("密码不能小于6位数");
} else if (password !== confirmPassword) {
event.preventDefault();//阻止表单提交
alert("两次输入的密码不一致");
}
});
</script>
</body>
</html>
在更新的代码中，添加了一个用于显示密码不一致错误提示的span元素，并给确认密码输入框绑定了失去焦点事件，用于检查密码是否一致。另外，给提交按钮绑定了点击事件，在点击提交按钮时检查密码是否小于6位数和两次密码是否一致，并阻止表单的提交。如果密码不符合要求，则弹出提示框显示相应的错误信息
原文地址: https://www.cveoy.top/t/topic/iLhq 著作权归作者所有。请勿转载和采集!