<!--(一)验证二次输入密码一致。要求: (本题15分) 1、输入框获得焦点时改变输入框背景色(颜色自定义),失去焦点后恢复原颜色。 2、密码由数字和大小写字母中至少二种组成,长度为6至10位,密码输入后以“*”号显示, 输入完成后输入框失去焦点时,用正则表达式进行判断密码形式是否满足要求, 输入有误时在输入框后面显示输入密码类型或长度错误。 3、从二个文本框中输入密码一致时,用警告框提示验证通过,否则提示不通过; 4、验证三次密码不一致时,验证按钮禁用3分钟,3分钟之后解除禁止。 5、使用jQuery完成本题。-->完成上述要求,并用js,jquery代码完成
时间: 2024-03-15 07:44:18 浏览: 125
好的,下面是使用jQuery完成密码验证的代码:
HTML代码:
```html
<div>
<label>请输入密码:</label>
<input type="password" id="password1" />
</div>
<div>
<label>请再次输入密码:</label>
<input type="password" id="password2" />
</div>
<div>
<button id="submitBtn">验证</button>
</div>
<div id="errorMsg"></div>
```
jQuery代码:
```js
$(function() {
// 设置密码输入框获得焦点时的背景色
$('input[type=password]').focus(function() {
$(this).css('background-color', '#e6f1f6');
});
// 设置密码输入框失去焦点时恢复原背景色
$('input[type=password]').blur(function() {
$(this).css('background-color', '#fff');
});
// 设置密码输入框输入内容变化时显示*号
$('input[type=password]').bind('input propertychange', function() {
var val = $(this).val();
var star = '';
for (var i = 0; i < val.length; i++) {
star += '*';
}
$(this).val(star);
});
// 点击验证按钮时进行密码验证
$('#submitBtn').click(function() {
var password1 = $('#password1').val(); // 获取第一个密码框中的密码
var password2 = $('#password2').val(); // 获取第二个密码框中的密码
if (!isValidPassword(password1)) { // 验证第一个密码框中的密码格式
$('#errorMsg').text('密码格式不正确');
} else if (password1 !== password2) { // 验证两个密码框中的密码是否一致
$('#errorMsg').text('两次输入的密码不一致');
checkDisabled(); // 检查是否需要禁用验证按钮
} else { // 验证通过
alert('验证通过');
}
});
// 验证密码格式是否正确
function isValidPassword(password) {
var pattern = /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]{6,10})$/;
return pattern.test(password);
}
// 检查是否需要禁用验证按钮
var errorCount = 0; // 记录验证不通过的次数
function checkDisabled() {
errorCount++;
if (errorCount === 3) { // 如果验证不通过的次数达到3次,就禁用验证按钮
$('#submitBtn').attr('disabled', true);
setTimeout(function() {
$('#submitBtn').removeAttr('disabled');
errorCount = 0; // 重置验证不通过的次数
}, 180000); // 3分钟后解除禁用
}
}
});
```
阅读全文