使用jQuery验证二次输入密码一致。要求: 1、输入框获得焦点时改变输入框背景色(颜色自定义),失去焦点后恢复原颜色。 2、密码由数字和大小写字母中至少二种组成,长度为6至10位,密码输入后以“*”号显示,输入完成后输入框失去焦点时,用正则表达式进行判断密码形式是否满足要求,输入有误时在输入框后面显示输入密码类型或长度错误。 3、从二个文本框中输入密码一致时,用警告框提示验证通过,否则提示不通过; 4、验证三次密码不一致时,验证按钮禁用3分钟,3分钟之后解除禁止。
时间: 2024-03-12 08:48:23 浏览: 114
好的,下面是使用 jQuery 实现上述要求的代码:
HTML 代码:
```html
<div>
<label for="password">密码:</label>
<input type="password" id="password" placeholder="请输入密码">
</div>
<div>
<label for="password-confirm">确认密码:</label>
<input type="password" id="password-confirm" placeholder="请再次输入密码">
</div>
<button id="submit-btn">验证</button>
```
JavaScript 代码:
```javascript
$(function() {
var password = $("#password");
var passwordConfirm = $("#password-confirm");
var submitBtn = $("#submit-btn");
var errorTips = $("<span class='error-tips'></span>");
// 输入框获得焦点时改变背景色
password.focus(function() {
$(this).css("background-color", "#e6f3ff");
}).blur(function() {
$(this).css("background-color", "#fff");
});
passwordConfirm.focus(function() {
$(this).css("background-color", "#e6f3ff");
}).blur(function() {
$(this).css("background-color", "#fff");
});
// 密码输入框校验
password.keyup(function() {
var val = $(this).val();
var regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\s\S]{6,10}$/;
if (!regex.test(val)) {
errorTips.text("密码由数字和大小写字母中至少二种组成,长度为6至10位");
$(this).after(errorTips);
} else {
errorTips.remove();
}
});
// 确认密码输入框校验
passwordConfirm.blur(function() {
var val = $(this).val();
if (val !== password.val()) {
errorTips.text("两次输入的密码不一致");
$(this).after(errorTips);
} else {
errorTips.remove();
}
});
// 验证按钮点击事件
submitBtn.click(function() {
if (errorTips.length === 0) {
alert("验证通过");
} else {
alert("验证不通过");
}
});
});
```
代码解释:
1. 首先获取密码输入框、确认密码输入框、验证按钮和错误提示框元素。
2. 给密码输入框和确认密码输入框添加获取焦点和失去焦点事件,改变输入框背景色。
3. 给密码输入框添加 keyup 事件,每次输入时校验密码格式是否正确,如果不正确,在输入框后面显示错误提示。
4. 给确认密码输入框添加 blur 事件,当失去焦点时校验两次输入的密码是否一致,如果不一致,在输入框后面显示错误提示。
5. 给验证按钮添加点击事件,判断是否有错误提示框,如果有提示验证不通过,否则提示验证通过。
6. 在校验密码和确认密码时,如果有错误提示框,则在输入框后面添加一个错误提示框,否则移除已有的错误提示框。
阅读全文