实验目的 掌握HTML常用的标签 掌握CSS常用的样式 掌握JavaScript常用语法 实验内容 开发一个美观大方的修改密码表单界面,包含3个表单项:旧密码、新密码和确认密码,监听表单提交事件,当表单提交时完成如下3种检查 要求输入的旧密码字符个数必须大于6个字符小于12个字符,否则在旧密码输入框的后面以红色字体提示“旧密码长度有误”; 要求输入的新密码和确认密码相同,否则在确认密码的下面以红色字体显示“新密码与确认密码不一致”; 新密码里必须包含数字、字母和特殊符号,否则在新密码输入框后面提示“必须包含数字、字母和特殊符号”用html代码写
时间: 2024-02-12 18:09:43 浏览: 69
好的,以下是一个简单的HTML示例代码,包含一个修改密码表单界面,其中包含3个表单项:旧密码、新密码和确认密码,并实现了您所要求的三种检查功能:
```
<!DOCTYPE html>
<html>
<head>
<title>修改密码表单界面</title>
<style>
.error {
color: red;
}
</style>
<script>
function checkForm() {
var oldPwd = document.getElementById("oldPwd").value;
var newPwd = document.getElementById("newPwd").value;
var confirmPwd = document.getElementById("confirmPwd").value;
// 检查旧密码长度
if (oldPwd.length < 6 || oldPwd.length > 12) {
document.getElementById("oldPwdError").innerHTML = "旧密码长度有误";
return false;
} else {
document.getElementById("oldPwdError").innerHTML = "";
}
// 检查新密码和确认密码是否相同
if (newPwd != confirmPwd) {
document.getElementById("confirmPwdError").innerHTML = "新密码与确认密码不一致";
return false;
} else {
document.getElementById("confirmPwdError").innerHTML = "";
}
// 检查新密码是否包含数字、字母和特殊符号
var pattern = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,12}$/;
if (!pattern.test(newPwd)) {
document.getElementById("newPwdError").innerHTML = "必须包含数字、字母和特殊符号";
return false;
} else {
document.getElementById("newPwdError").innerHTML = "";
}
// 如果检查通过,提交表单
document.getElementById("myForm").submit();
}
</script>
</head>
<body>
<form id="myForm" action="submit.php" onsubmit="return checkForm()">
<label for="oldPwd">旧密码:</label>
<input type="password" id="oldPwd" name="oldPwd"><span id="oldPwdError" class="error"></span><br>
<label for="newPwd">新密码:</label>
<input type="password" id="newPwd" name="newPwd"><span id="newPwdError" class="error"></span><br>
<label for="confirmPwd">确认密码:</label>
<input type="password" id="confirmPwd" name="confirmPwd"><span id="confirmPwdError" class="error"></span><br>
<input type="submit" value="提交">
</form>
</body>
</html>
```
在这个示例代码中,首先定义了一个样式类 `.error`,用于设置红色字体。在 `<script>` 标签中定义了一个名为 `checkForm()` 的 JavaScript 函数,用于检查表单的输入项,并在不符合要求时设置相应的错误提示信息。在 HTML 表单中,通过给每个表单项设置一个唯一的 `id` 属性,以便在 JavaScript 中获取其值和设置错误提示信息。在 `<form>` 标签中设置了 `onsubmit="return checkForm()"`,表示在表单提交时调用 `checkForm()` 函数进行检查。
阅读全文