好的，这是一个关于网页编程使用
jQuery 的问题，需要
实现以下功能：
1. 两个上下输入框，一个验证按钮。
2. 输入框获得焦点
时改
变输入框
背景色，失去焦点后恢复原
颜色。
3. 密码由数字和大小写字母中至少二种组成，长度为6至10位，密码输入后以“*”号显示，输入完成后输入框失去焦点
时，用正则表达式进行判断密码形式是否满足要求，输入有误
时在输入框后面显示输入密码类型或长度错误。
4. 从二个
文本框中输入密码一致
时，用文本警告框提示验证通过，否则提示不通过。
5. 验证三次密码不一致
时，验证按钮禁用3分钟，3分钟之后解除禁止。
下面是一个简单的
实现步骤：
1.
HTML结构：
```
html
<div class="form-group">
<label for="password1">密码</label>
<
input type="password" class="form-control" id="password1" placeholder="请输入密码">
</div>
<div class="form-group">
<label for="password2">确认密码</label>
<
input type="password" class="form-control" id="password2" placeholder="请再次输入密码">
</div>
<
button type="
button" class="btn btn-primary" id="verify-btn">验证</
button>
```
2.
jQuery代码：
```javascript
$(document).ready(
function() {
var password1 = $('#password1');
var password2 = $('#password2');
var verifyBtn = $('#verify-btn');
var count = 0;
// 输入框获得焦点
时改
变输入框
背景色，失去焦点后恢复原
颜色。
password1.focus(
function() {
$(this).css('background-color', '#F5F5F5');
}).blur(
function() {
$(this).css('background-color', '#FFF');
});
password2.focus(
function() {
$(this).css('background-color', '#F5F5F5');
}).blur(
function() {
$(this).css('background-color', '#FFF');
});
// 密码输入完成后输入框失去焦点
时，用正则表达式进行判断密码形式是否满足要求
password1.on('
input',
function() {
var password = $(this).val();
if (password.length < 6 || password.length > 10) {
$(this).next().
text('密码长度应为6至10位');
return;
}
if (!/[0-9]/.test(password) || !/[a-zA-Z]/.test(password)) {
$(this).next().
text('密码应包含数字和大小写字母中至少两种');
return;
}
$(this).next().
text('');
});
// 确认密码输入完成后输入框失去焦点
时，判断两次密码是否一致
password2.on('
input',
function() {
var password1Val = password1.val();
var password2Val = $(this).val();
if (password1Val !== password2Val) {
$(this).next().
text('两次输入的密码不一致');
return;
}
$(this).next().
text('');
});
// 验证按钮
点击事件
verifyBtn.click(
function() {
var password1Val = password1.val();
var password2Val = password2.val();
// 判断两次密码是否一致
if (password1Val !== password2Val) {
alert('两次输入的密码不一致');
count++;
// 验证三次密码不一致
时，验证按钮禁用3分钟
if (count >= 3) {
verifyBtn.attr('disabled', true);
setTimeout(
function() {
verifyBtn.attr('disabled', false);
count = 0;
}, 3 * 60 * 1000);
}
return;
}
alert('验证通过');
});
});
```
3. CSS样式：
```css
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}
```
以上是一个简单的
实现，具体的
实现方式可以根据需要进行修改和完善。
470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
