设置密码不能小于6位数确认密码于输入的密码不一致则提示两次输入的两次密码不一致并给出完整的代码及注释!DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 titleTitletitle style #d1 width 600px; height 200px;
<!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;
}
<pre><code> #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>
</code></pre>
</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="请输入邮箱" id="emailInput">
<pre><code> <span id="emailErrorSpan" 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="passwordMatchError" 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>
</code></pre>
</div>
<script>
//获取用户名输入框
let emailInput = document.getElementById("emailInput");
//获取邮箱不合法提示元素
let emailErrorSpan = document.getElementById("emailErrorSpan");
//获取密码输入框
let passwordInput = document.getElementById("passwordInput");
//获取确认密码输入框
let confirmPasswordInput = document.getElementById("confirmPasswordInput");
//获取身份证号输入框
let idInput = document.getElementById("idInput");
//获取提交按钮元素
let submitBtn = document.getElementById("submitBtn");
<pre><code>//给用户名输入框绑定失去焦点事件
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) {
passwordMatchError.style.display = 'inline';//显示错误提示
} else {
passwordMatchError.style.display = 'none';//隐藏错误提示
}
});
//给表单绑定提交事件
submitBtn.addEventListener('click', function (event) {
//阻止表单的默认提交行为
event.preventDefault();
//获取输入的密码和确认密码
let password = passwordInput.value;
let confirmPassword = confirmPasswordInput.value;
//判断密码长度是否小于6位数
if (password.length < 6) {
alert("密码不能小于6位数");
return;
}
//判断两次输入的密码是否一致
if (password !== confirmPassword) {
alert("两次输入的密码不一致");
return;
}
//提交表单
document.getElementsByTagName("form")[0].submit();
});
</code></pre>
</script>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/iLis 著作权归作者所有。请勿转载和采集!