创建一个基础表单,要求包含姓名、学号、密码、密码确认、确认提交基础控件,完成密码确认的基础校验,密码输入不一致 情况下弹出报错提示【请重新输入密码].
时间: 2023-08-24 11:06:29 浏览: 72
好的,这是一个关于Web开发方面的问题。你需要使用HTML、CSS和JavaScript来完成这个任务。以下是一个基本的表单模板,你可以在此基础上添加你想要的控件和逻辑:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单示例</title>
<style>
label {
display: inline-block;
width: 80px;
text-align: right;
margin-right: 10px;
}
input[type="text"], input[type="password"] {
width: 200px;
margin-bottom: 10px;
}
.error {
color: red;
}
</style>
</head>
<body>
<form id="myForm">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="studentID">学号:</label>
<input type="text" id="studentID" name="studentID"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<label for="confirmPassword">确认密码:</label>
<input type="password" id="confirmPassword" name="confirmPassword"><br>
<input type="submit" value="提交">
</form>
<div id="errorBox" class="error"></div>
<script>
var form = document.getElementById("myForm");
var password = document.getElementById("password");
var confirmPassword = document.getElementById("confirmPassword");
var errorBox = document.getElementById("errorBox");
form.addEventListener("submit", function(event) {
if (password.value !== confirmPassword.value) {
event.preventDefault();
errorBox.innerHTML = "请重新输入密码";
}
});
</script>
</body>
</html>
```
这个模板包含了一个表单,其中包含了姓名、学号、密码和确认密码这几个基本控件,以及一个提交按钮。在JavaScript部分,我们添加了一个事件监听器,监听表单的提交事件。如果密码和确认密码不一致,那么我们会阻止表单的提交,并在一个错误框中提示用户重新输入密码。
阅读全文