代码生成:ry完成: 1.上下两个输入框,下面一个验证按钮 2.输入框获得焦点时改变输入框背景色(颜色自定义),失去焦点后恢复原颜色。 3.密码由数字和大写字母和小写字母三种中至少二种组成,长度为6至10位, 4.密码输入后以“*”号显示, 5.输入完成后输入框失去焦点时,用正则表达式进行判断密码形式是否满足要求,输入有误时在输入框后面显示输入密码类型或长度错误。 6.从二个文本框中输入密码一致时,用警告框提示验证通过,否则提示不通过; 7.验证三次密码不一致时,验证按钮禁用3分钟,3分钟之后解除禁止。
时间: 2024-03-17 07:41:44 浏览: 90
以下是代码实现:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>密码验证</title>
<style>
input {
margin: 10px;
padding: 5px;
border: 2px solid #ccc;
border-radius: 5px;
outline: none;
transition: border-color 0.3s;
}
input:focus {
border-color: #007bff;
background-color: #f0f8ff;
}
#error {
color: red;
margin-left: 10px;
font-size: small;
}
</style>
</head>
<body>
<div>
<label for="password1">密码:</label>
<input type="password" id="password1" maxlength="10" placeholder="请输入密码">
</div>
<div>
<label for="password2">确认密码:</label>
<input type="password" id="password2" maxlength="10" placeholder="请再次输入密码">
</div>
<button id="verifyBtn">验证</button>
<div id="error"></div>
<script>
let password1 = document.getElementById('password1');
let password2 = document.getElementById('password2');
let verifyBtn = document.getElementById('verifyBtn');
let error = document.getElementById('error');
let count = 0;
// 验证密码
function verifyPassword() {
let password1Value = password1.value.trim();
let password2Value = password2.value.trim();
// 判断密码是否一致
if (password1Value !== password2Value) {
error.textContent = '两次输入的密码不一致';
return false;
}
// 判断密码是否符合要求
let pattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,10}$/;
if (!pattern.test(password1Value)) {
error.textContent = '密码必须由数字和大写字母和小写字母三种中至少二种组成,长度为6至10位';
return false;
}
error.textContent = '';
return true;
}
// 监听输入框失去焦点事件
password1.addEventListener('blur', function() {
verifyPassword();
});
password2.addEventListener('blur', function() {
verifyPassword();
});
// 监听验证按钮点击事件
verifyBtn.addEventListener('click', function() {
if (verifyPassword()) {
alert('验证通过');
} else {
count++;
if (count === 3) {
verifyBtn.disabled = true;
setTimeout(function() {
verifyBtn.disabled = false;
count = 0;
}, 180000);
}
}
});
</script>
</body>
</html>
```
注意:本代码中的正则表达式只是一种简单的实现方式,不一定能够满足所有的密码要求。如果需要更为严格的密码要求,应该使用更加复杂的正则表达式或者其他的验证方法。
阅读全文