验证二次输入密码一致。要求: 1、输入框获得焦点时改变输入框背景色为pink,失去焦点后恢复原颜色。 2、密码由数字和大小写字母中至少二种组成,长度为6至10位,密码输入后以“*”号显示,输入完成后输入框失去焦点时,用正则表达式进行判断密码形式是否满足要求,输入有误时在输入框后面显示输入密码类型或长度错误。 3、从二个文本框中输入密码一致时,用警告框提示验证通过,否则提示不通过; 4、验证三次密码不一致时,验证按钮禁用3分钟,3分钟之后解除禁止。 5、使用jQuery完成本题。
时间: 2024-03-14 12:47:17 浏览: 19
好的,以下是符合您要求的代码:
HTML部分:
```html
<p>请输入密码:</p>
<input type="password" id="password1">
<p>请再次输入密码:</p>
<input type="password" id="password2">
<button id="checkBtn">验证</button>
```
JS部分:
```javascript
var password1 = $("#password1");
var password2 = $("#password2");
var checkBtn = $("#checkBtn");
var errBox = $("<span></span>").css("color", "red");
// 输入框获取焦点时改变背景色
password1.focus(function() {
$(this).css("background-color", "pink");
}).blur(function() {
$(this).css("background-color", "white");
});
password2.focus(function() {
$(this).css("background-color", "pink");
}).blur(function() {
$(this).css("background-color", "white");
});
// 验证密码格式是否正确
function checkPasswordFormat(password) {
// 密码由数字和大小写字母中至少二种组成,长度为6至10位
var reg = /^(?=.*[0-9])(?=.*[a-zA-Z])(.{6,10})$/;
return reg.test(password);
}
// 验证密码是否一致
function checkPasswordEqual() {
var p1 = password1.val();
var p2 = password2.val();
if (p1 !== p2) {
alert("两次输入的密码不一致!");
return false;
}
return true;
}
// 禁用验证按钮3分钟
function disableCheckBtn() {
checkBtn.attr("disabled", "disabled");
setTimeout(function() {
checkBtn.removeAttr("disabled");
}, 3 * 60 * 1000);
}
// 点击验证按钮时进行验证
checkBtn.click(function() {
var p1 = password1.val();
var p2 = password2.val();
errBox.remove();
if (!checkPasswordFormat(p1)) {
password1.after(errBox.clone().text("密码格式错误!"));
return;
}
if (!checkPasswordEqual()) {
return;
}
alert("验证通过!");
disableCheckBtn();
});
```
注释已经写的比较详细了,如果有不清楚的地方可以留言问我。