代码生成:(一)验证二次输入密码一致。用jQuery完成: 1.上下两个输入框,下面一个验证按钮 2.输入框获得焦点时改变输入框背景色(颜色自定义),失去焦点后恢复原颜色。 3.密码由数字和大写字母和小写字母三种中至少二种组成,长度为6至10位, 4.密码输入后以“*”号显示, 5.输入完成后输入框失去焦点时,用正则表达式进行判断密码形式是否满足要求,输入有误时在输入框后面显示输入密码类型或长度错误。 6.从二个文本框中输入密码一致时,用警告框提示验证通过,否则提示不通过; 7.验证三次密码不一致时,验证按钮禁用3分钟,3分钟之后解除禁止。
时间: 2024-03-17 18:41:34 浏览: 16
好的,以下是实现该功能的代码:
HTML部分:
```
<input type="password" id="password1" placeholder="请输入密码"><br>
<input type="password" id="password2" placeholder="请再次输入密码"><br>
<button id="validateBtn">验证</button>
<div id="errorMsg"></div>
```
jQuery部分:
```
$(function() {
var validateBtn = $("#validateBtn");
var errorMsg = $("#errorMsg");
var password1 = $("#password1");
var password2 = $("#password2");
// 密码输入框获得焦点时改变背景色
password1.focus(function() {
$(this).css("background-color", "#eee");
});
password2.focus(function() {
$(this).css("background-color", "#eee");
});
// 密码输入框失去焦点时恢复原背景色
password1.blur(function() {
$(this).css("background-color", "#fff");
});
password2.blur(function() {
$(this).css("background-color", "#fff");
});
// 密码输入框输入完成后,判断密码是否符合要求
function validatePassword() {
var password = password1.val();
var pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{6,10}$/;
if (!pattern.test(password)) {
errorMsg.text("密码必须由数字和大小写字母组成,长度为6至10位");
return false;
}
return true;
}
// 验证按钮点击事件
validateBtn.click(function() {
if (validatePassword()) {
if (password1.val() == password2.val()) {
alert("验证通过!");
} else {
errorMsg.text("两次输入的密码不一致");
validateBtn.attr("disabled", true);
setTimeout(function() {
validateBtn.attr("disabled", false);
errorMsg.text("");
}, 180000); // 禁用3分钟
}
}
});
// 密码输入框输入时,用*号显示
password1.keyup(function() {
var password = $(this).val();
var len = password.length;
var hiddenPassword = "";
for (var i = 0; i < len; i++) {
hiddenPassword += "*";
}
$(this).val(hiddenPassword);
});
password2.keyup(function() {
var password = $(this).val();
var len = password.length;
var hiddenPassword = "";
for (var i = 0; i < len; i++) {
hiddenPassword += "*";
}
$(this).val(hiddenPassword);
});
});
```