网页编程:验证二次输入密码一致 1.输入框获得焦点时改变输入框背景色(颜色自定义),失去焦点后恢复原颜色。 2.密码由数字和大小写字母中至少二种组成,长度为6至10位,密码输入后以“*”号显示,输入完成后输入框失去焦点时,用正则表达式进行判断密码形式是否满足要求,输入有误时在输入框后面显示输入密码类型或长度错误。 3.从二个文本框中输入密码一致时,用警告框提示验证通过,否则提示不通过; 4.验证三次密码不一致时,验证按钮禁用3分钟,3分钟之后解除禁止。 5.使用jQuery完成本题。
时间: 2024-03-10 18:43:46 浏览: 17
以下是一个基本的网页编程实现验证二次输入密码一致的代码,包括输入框获得焦点时改变背景色、密码格式验证、两次密码一致性验证和禁用按钮功能。
HTML部分:
```html
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="请输入密码" />
<label for="password-confirm">确认密码:</label>
<input type="password" id="password-confirm" name="password-confirm" placeholder="请再次输入密码" />
<div id="password-error"></div>
<button id="submit" disabled>提交</button>
```
jQuery部分:
```javascript
$(document).ready(function() {
// 输入框获得焦点时改变背景色
$('input[type="password"]').focus(function() {
$(this).css('background-color', '#f2f2f2');
});
$('input[type="password"]').blur(function() {
$(this).css('background-color', '#ffffff');
});
// 密码格式验证
$('input[type="password"]').keyup(function() {
var password = $(this).val();
if (password.length < 6 || password.length > 10) {
$('#password-error').text('密码长度应在6至10位之间');
$(this).css('border', '1px solid red');
} else if (!/[a-z]/.test(password) || !/[A-Z]/.test(password) || !/[0-9]/.test(password)) {
$('#password-error').text('密码应包含数字和大小写字母中至少二种');
$(this).css('border', '1px solid red');
} else {
$('#password-error').text('');
$(this).css('border', '1px solid #ccc');
}
});
// 两次密码一致性验证
$('#password-confirm').keyup(function() {
var password = $('#password').val();
var passwordConfirm = $(this).val();
if (password !== passwordConfirm) {
$('#password-error').text('两次密码不一致');
$(this).css('border', '1px solid red');
$('#submit').attr('disabled', true);
} else {
$('#password-error').text('');
$(this).css('border', '1px solid #ccc');
$('#submit').attr('disabled', false);
}
});
// 禁用按钮功能
var errorCount = 0;
$('#submit').click(function() {
var password = $('#password').val();
var passwordConfirm = $('#password-confirm').val();
if (password !== passwordConfirm) {
errorCount++;
if (errorCount >= 3) {
$('#submit').attr('disabled', true);
setTimeout(function() {
$('#submit').attr('disabled', false);
errorCount = 0;
}, 180000);
}
} else {
errorCount = 0;
}
});
});
```
注意,以上代码只是一个基本的实现,可能还需要根据具体需求进行调整。同时,为了确保安全性,密码在提交前应进行加密处理。