代码生成:使用jQuery完成:1.上下两个输入框,下面一个验证按钮 2.输入框获得焦点时改变输入框背景色(颜色自定义),失去焦点后恢复原颜色。 3.密码由数字和大写字母和小写字母三种中至少二种组成,长度为6至10位, 4.密码输入后以“*”号显示, 5.输入完成后输入框失去焦点时,用正则表达式进行判断密码形式是否满足要求,输入有误时在输入框后面显示输入密码类型或长度错误。 6.从二个文本框中输入密码一致时,用警告框提示验证通过,否则提示不通过; 7.验证三次密码不一致时,验证按钮禁用3分钟,3分钟之后解除禁止
时间: 2024-03-17 20:44:33 浏览: 79
jQuery实现的输入框获得焦点时改变样式效果(默认是灰色).zip
以下是实现上述功能的 jQuery 代码:
```javascript
$(document).ready(function() {
var passwordInput = $('#passwordInput');
var confirmPasswordInput = $('#confirmPasswordInput');
var validateButton = $('#validateButton');
var passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{6,10}$/; // 密码正则表达式
var errorText = ''; // 错误信息
// 输入框获取焦点时改变背景色
passwordInput.focus(function() {
$(this).css('background-color', '#dff0d8');
});
confirmPasswordInput.focus(function() {
$(this).css('background-color', '#dff0d8');
});
// 输入框失去焦点时恢复原背景色
passwordInput.blur(function() {
$(this).css('background-color', '');
});
confirmPasswordInput.blur(function() {
$(this).css('background-color', '');
});
// 密码输入框以“*”号显示
passwordInput.keyup(function() {
var password = $(this).val();
var passwordLength = password.length;
var passwordHidden = '';
for (var i = 0; i < passwordLength; i++) {
passwordHidden += '*';
}
$(this).val(passwordHidden);
});
// 验证密码长度和格式是否正确
passwordInput.blur(function() {
var password = $(this).val();
if (!passwordRegex.test(password)) {
errorText = '密码长度为6至10位,由数字和大小写字母中至少两种组成';
$(this).after('<span class="error">' + errorText + '</span>');
} else {
$(this).next('.error').remove();
}
});
// 验证两个密码输入框中的密码是否一致
confirmPasswordInput.blur(function() {
var confirmPassword = $(this).val();
var password = passwordInput.val();
if (confirmPassword !== password) {
errorText = '两次输入的密码不一致';
$(this).after('<span class="error">' + errorText + '</span>');
} else {
$(this).next('.error').remove();
}
});
// 点击验证按钮进行密码验证
validateButton.click(function() {
var password = passwordInput.val();
var confirmPassword = confirmPasswordInput.val();
if (!passwordRegex.test(password)) {
errorText = '密码长度为6至10位,由数字和大小写字母中至少两种组成';
passwordInput.after('<span class="error">' + errorText + '</span>');
} else {
passwordInput.next('.error').remove();
}
if (confirmPassword !== password) {
errorText = '两次输入的密码不一致';
confirmPasswordInput.after('<span class="error">' + errorText + '</span>');
} else {
confirmPasswordInput.next('.error').remove();
}
// 验证三次密码不一致时禁用验证按钮3分钟
if ($('.error').length >= 3) {
validateButton.prop('disabled', true);
setTimeout(function() {
validateButton.prop('disabled', false);
}, 180000);
} else {
alert('密码验证通过!');
}
});
});
```
阅读全文