开发一个美观大方的修改密码表单界面,包含3个表单项:旧密码、新密码和确认密码,监听表单提交事件,当表单提交时完成如下3种检查 1.要求输入的旧密码字符个数必须大于6个字符小于12个字符,否则在旧密码输入框的后面以红色字体提示“旧密码长度有误”; 2.要求输入的新密码和确认密码相同,否则在确认密码的下面以红色字体显示“新密码与确认密码不一致”; 3.新密码里必须包含数字、字母和特殊符号,否则在新密码输入框后面提示“必须包含数字、字母和特殊符号”。
时间: 2024-01-22 13:18:33 浏览: 144
以下是一个基本的修改密码表单界面,包含3个表单项,以及相应的检查提示和提交事件监听:
```
<!DOCTYPE html>
<html>
<head>
<title>修改密码</title>
<style>
form {
border: 1px solid #ccc;
padding: 20px;
width: 300px;
margin: 0 auto;
}
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
}
.error {
color: red;
font-size: 12px;
margin-top: 5px;
}
.success {
color: green;
font-size: 12px;
margin-top: 5px;
}
</style>
</head>
<body>
<form id="password-form" action="#" method="post">
<h2>修改密码</h2>
<label for="old-password">旧密码:</label>
<input type="password" id="old-password" name="old-password">
<span class="error" id="old-password-error"></span>
<label for="new-password">新密码:</label>
<input type="password" id="new-password" name="new-password">
<span class="error" id="new-password-error"></span>
<label for="confirm-password">确认密码:</label>
<input type="password" id="confirm-password" name="confirm-password">
<span class="error" id="confirm-password-error"></span>
<input type="submit" value="提交">
<span class="success" id="success-message"></span>
</form>
<script>
const form = document.querySelector('#password-form');
const oldPasswordInput = document.querySelector('#old-password');
const newPasswordInput = document.querySelector('#new-password');
const confirmPasswordInput = document.querySelector('#confirm-password');
const oldPasswordError = document.querySelector('#old-password-error');
const newPasswordError = document.querySelector('#new-password-error');
const confirmPasswordError = document.querySelector('#confirm-password-error');
const successMessage = document.querySelector('#success-message');
form.addEventListener('submit', (event) => {
event.preventDefault();
// 重置提示信息
oldPasswordError.textContent = '';
newPasswordError.textContent = '';
confirmPasswordError.textContent = '';
successMessage.textContent = '';
// 检查旧密码长度
if (oldPasswordInput.value.length < 6 || oldPasswordInput.value.length > 12) {
oldPasswordError.textContent = '旧密码长度有误';
}
// 检查新密码和确认密码是否相同
if (newPasswordInput.value !== confirmPasswordInput.value) {
confirmPasswordError.textContent = '新密码与确认密码不一致';
}
// 检查新密码是否包含数字、字母和特殊符号
const regex = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[@#$%^&+=])/
if (!regex.test(newPasswordInput.value)) {
newPasswordError.textContent = '必须包含数字、字母和特殊符号';
}
// 如果没有错误提示,则提交表单并显示成功信息
if (!oldPasswordError.textContent && !newPasswordError.textContent && !confirmPasswordError.textContent) {
successMessage.textContent = '密码修改成功!';
form.reset();
}
});
</script>
</body>
</html>
```
该表单界面使用了 html、css 和 JavaScript,其中:
- html 中包含了一个 form 元素和三个 input 元素(类型为 password),以及相应的 label 元素和提示信息的 span 元素;
- css 中为表单界面设置了一些基本样式;
- JavaScript 中对表单的提交事件进行了监听,然后进行了三种检查,根据检查结果显示相应的错误提示或成功信息。
注意,以上只是一个基本的示例,实际情况中可能还需要对表单提交事件进行更多的检查和处理。
阅读全文