代码生成:(一)验证二次输入密码一致。用jQuery完成: 1.上下两个输入框,下面一个验证按钮 2.输入框获得焦点时改变输入框背景色(颜色自定义),失去焦点后恢复原颜色。 3.密码由数字和大写字母和小写字母三种中至少二种组成,长度为6至10位, 4.密码输入后以“*”号显示, 5.输入完成后输入框失去焦点时,用正则表达式进行判断密码形式是否满足要求,输入有误时在输入框后面显示输入密码类型或长度错误。 6.从二个文本框中输入密码一致时,用警告框提示验证通过,否则提示不通过; 7.验证三次密码不一致时,验证按钮禁用3分钟,3分钟之后解除禁止。
时间: 2024-03-17 12:44:13 浏览: 142
好的,以下是对应的代码实现(注释中有详细说明):
HTML代码:
```
<input type="password" id="password1" placeholder="请输入密码">
<input type="password" id="password2" placeholder="请再次输入密码">
<button id="validateBtn">验证</button>
<div id="errorMsg"></div>
```
jQuery代码:
```javascript
$(function() {
var validateBtn = $('#validateBtn'); // 获取验证按钮元素
var errorMsg = $('#errorMsg'); // 获取错误信息提示元素
var password1 = $('#password1'); // 获取第一个密码输入框元素
var password2 = $('#password2'); // 获取第二个密码输入框元素
// 定义一个函数,用于检验密码格式是否正确
function checkPasswordFormat(password) {
var reg = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)[A-Za-z\d]{6,10}$/; // 定义密码格式正则表达式
return reg.test(password);
}
// 定义一个函数,用于检验两次输入密码是否一致
function checkPasswordMatch() {
var pwd1 = password1.val(); // 获取第一个密码输入框的值
var pwd2 = password2.val(); // 获取第二个密码输入框的值
if (pwd1 === pwd2) { // 如果两次输入密码一致
alert('验证通过!'); // 提示验证通过
errorMsg.hide(); // 隐藏错误信息提示
password1.val(''); // 清空第一个密码输入框的值
password2.val(''); // 清空第二个密码输入框的值
} else { // 如果两次输入密码不一致
errorMsg.text('两次输入密码不一致!').show(); // 显示错误信息提示
}
}
// 当第一个密码输入框获取焦点时,改变输入框背景色
password1.focus(function() {
$(this).css('background-color', '#FFFFCC');
});
// 当第一个密码输入框失去焦点时,恢复原背景色并检验密码格式是否正确
password1.blur(function() {
$(this).css('background-color', '#FFFFFF');
var password = $(this).val(); // 获取当前密码输入框的值
if (!checkPasswordFormat(password)) { // 如果密码格式不正确
errorMsg.text('密码格式不正确!').show(); // 显示错误信息提示
} else { // 如果密码格式正确
errorMsg.hide(); // 隐藏错误信息提示
}
});
// 当第二个密码输入框获取焦点时,改变输入框背景色
password2.focus(function() {
$(this).css('background-color', '#FFFFCC');
});
// 当第二个密码输入框失去焦点时,恢复原背景色并检验两次输入密码是否一致
password2.blur(function() {
$(this).css('background-color', '#FFFFFF');
checkPasswordMatch();
});
// 点击验证按钮时,检验两次输入密码是否一致
validateBtn.click(function() {
checkPasswordMatch();
});
});
```
阅读全文