(一)验证二次输入密码一致。要求: (本题15分) 1、输入框获得焦点时改变输入框背景色(颜色自定义),失去焦点后恢复原颜色。 2、密码由数字和大小写字母中至少二种组成,长度为6至10位,密码输入后以“*”号显示,输入完成后输入框失去焦点时,用正则表达式进行判断密码形式是否满足要求,输入有误时在输入框后面显示输入密码类型或长度错误。 3、从二个文本框中输入密码一致时,用警告框提示验证通过,否则提示不通过; 4、验证三次密码不一致时,验证按钮禁用3分钟,3分钟之后解除禁止。 5、使用jQuery完成本题。
时间: 2024-03-06 17:49:21 浏览: 11
好的,让我来回答你的问题。
首先,感谢您提供的问题。针对您的问题,我会尽力回答。下面是对您的问题的回答:
针对您的第一个问题,以下是代码实现:
HTML 代码:
```
<label for="password">密码:</label>
<input type="password" id="password" placeholder="请输入密码" autocomplete="off">
<label for="confirmPassword">确认密码:</label>
<input type="password" id="confirmPassword" placeholder="请再次输入密码" autocomplete="off">
<button id="submitBtn">验证</button>
<div id="errorTip"></div>
```
CSS 代码:
```
input:focus {
background-color: #f5f5f5;
}
```
jQuery 代码:
```
$(function() {
var password = $("#password"),
confirmPassword = $("#confirmPassword"),
submitBtn = $("#submitBtn"),
errorTip = $("#errorTip"),
errorTimer = null,
errorCount = 0;
// 验证密码格式是否正确
function validatePasswordFormat(value) {
var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\s\S]{6,10}$/;
return reg.test(value);
}
// 验证密码是否一致
function validatePasswordMatch() {
if (password.val() === confirmPassword.val()) {
return true;
} else {
return false;
}
}
// 显示错误提示
function showErrorTip(msg) {
errorTip.text(msg).show();
if (errorTimer) {
clearTimeout(errorTimer);
}
errorTimer = setTimeout(function() {
errorTip.hide();
}, 3000);
}
// 监听密码输入框的焦点事件
password.on("focus", function() {
$(this).css("background-color", "#f5f5f5");
}).on("blur", function() {
$(this).css("background-color", "#fff");
if (!validatePasswordFormat($(this).val())) {
showErrorTip("密码格式不正确");
}
});
// 监听确认密码输入框的焦点事件
confirmPassword.on("focus", function() {
$(this).css("background-color", "#f5f5f5");
}).on("blur", function() {
$(this).css("background-color", "#fff");
if (!validatePasswordFormat($(this).val())) {
showErrorTip("确认密码格式不正确");
} else if (!validatePasswordMatch()) {
showErrorTip("两次输入的密码不一致");
}
});
// 监听验证按钮的点击事件
submitBtn.on("click", function() {
if (validatePasswordMatch()) {
alert("验证通过");
} else {
errorCount++;
if (errorCount >= 3) {
showErrorTip("验证失败,3分钟后再试");
submitBtn.attr("disabled", "disabled");
setTimeout(function() {
submitBtn.removeAttr("disabled");
errorCount = 0;
}, 180000);
} else {
showErrorTip("验证失败");
}
}
});
});
```
以上代码实现了二次输入密码一致的验证,具体实现方法请参考注释。
阅读全文