1、输入框获得焦点时改变输入框背景色,失去焦点后恢复原颜色;(2分) 2、密码由数字和大小写字母中至少二种组成,长度为6至10位,密码输入后以“*”号显示,输入完成后输入框失去焦点时,用正则表达式进行判断密码形式是否满足要求,输入有误时在输入框后面显示输入密码类型或长度错误;(5分) 3、从二个文本框中输入密码一致时,用警告框提示验证通过,否则提示不通过;(3分) 4、验证三次密码不一致时,验证按钮禁用3分钟,3分钟之后解除禁止;(5分) 5、使用jQuery完成本题。
时间: 2024-02-25 18:58:15 浏览: 66
仿微信和支付宝的密码输入框
好的,让我来一步步解答您的问题。
1. 首先,我们可以监听输入框的 focus 和 blur 事件,在事件处理函数中修改输入框的背景色,代码如下:
```javascript
$('input').on('focus', function() {
$(this).css('background-color', '#fff');
}).on('blur', function() {
$(this).css('background-color', '#ccc');
});
```
2. 接下来,我们需要对密码输入框进行一些限制。首先,我们可以使用 input[type="password"] 选择器来选中密码输入框,并使用正则表达式对密码进行验证,代码如下:
```javascript
$('input[type="password"]').on('blur', function() {
var password = $(this).val();
var regExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,10}$/;
if (!regExp.test(password)) {
$('#password-error').text('密码必须由数字和大小写字母中至少二种组成,长度为6至10位');
} else {
$('#password-error').text('');
}
});
```
在输入完成后,我们可以将输入框的值替换成相应数量的星号,代码如下:
```javascript
$('input[type="password"]').on('input', function() {
$(this).val($(this).val().replace(/[^\dA-Za-z]/g, '').substring(0, 10).replace(/./g, '*'));
});
```
3. 然后,我们需要验证两个密码输入框中的密码是否一致。我们可以监听两个输入框的 change 事件,在事件处理函数中比较两个输入框的值,如果不一致则提示用户,代码如下:
```javascript
$('#password-confirm').on('change', function() {
var password = $('#password').val();
var passwordConfirm = $('#password-confirm').val();
if (password !== passwordConfirm) {
alert('两次输入的密码不一致');
} else {
alert('验证通过');
}
});
```
4. 如果用户连续三次输入不一致的密码,我们需要禁用验证按钮3分钟。我们可以使用一个计数器变量来记录用户的错误次数,并使用 setInterval 函数来定时解除禁止状态,代码如下:
```javascript
var errorCount = 0;
var intervalId = null;
$('#password-confirm').on('change', function() {
var password = $('#password').val();
var passwordConfirm = $('#password-confirm').val();
if (password !== passwordConfirm) {
errorCount++;
if (errorCount >= 3) {
$('#verify-btn').prop('disabled', true);
clearInterval(intervalId);
var remainingTime = 180;
intervalId = setInterval(function() {
if (remainingTime <= 0) {
$('#verify-btn').prop('disabled', false);
clearInterval(intervalId);
} else {
$('#verify-btn').text('禁止验证 ' + remainingTime + ' 秒');
remainingTime--;
}
}, 1000);
}
} else {
errorCount = 0;
}
});
```
5. 最后,我们可以将所有代码放在 $(document).ready() 函数中,以确保DOM树加载完成后再执行脚本。完整代码如下:
```javascript
$(document).ready(function() {
$('input').on('focus', function() {
$(this).css('background-color', '#fff');
}).on('blur', function() {
$(this).css('background-color', '#ccc');
});
$('input[type="password"]').on('blur', function() {
var password = $(this).val();
var regExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,10}$/;
if (!regExp.test(password)) {
$('#password-error').text('密码必须由数字和大小写字母中至少二种组成,长度为6至10位');
} else {
$('#password-error').text('');
}
}).on('input', function() {
$(this).val($(this).val().replace(/[^\dA-Za-z]/g, '').substring(0, 10).replace(/./g, '*'));
});
$('#password-confirm').on('change', function() {
var password = $('#password').val();
var passwordConfirm = $('#password-confirm').val();
if (password !== passwordConfirm) {
errorCount++;
if (errorCount >= 3) {
$('#verify-btn').prop('disabled', true);
clearInterval(intervalId);
var remainingTime = 180;
intervalId = setInterval(function() {
if (remainingTime <= 0) {
$('#verify-btn').prop('disabled', false);
clearInterval(intervalId);
} else {
$('#verify-btn').text('禁止验证 ' + remainingTime + ' 秒');
remainingTime--;
}
}, 1000);
}
} else {
errorCount = 0;
alert('验证通过');
}
});
var errorCount = 0;
var intervalId = null;
});
```
阅读全文