创建一个基础表单,要求包括姓名、学号、密码确认、确认提交基础控件,完成密码确认的基础校验,密码输入不一致情况下弹出报错提示【其重新输入密码】
时间: 2024-03-20 14:45:16 浏览: 84
好的,以下是一个基础的表单代码,包括姓名、学号、密码确认和确认提交按钮,同时也完成了密码确认的基础校验,并在密码输入不一致的情况下弹出报错提示,要求用户重新输入密码:
```html
<form action="#" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="student_id">学号:</label>
<input type="text" id="student_id" name="student_id" required><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required><br><br>
<label for="confirm_password">确认密码:</label>
<input type="password" id="confirm_password" name="confirm_password" required oninput="check(this)"><br>
<span id="password_error" style="color:red;"></span><br>
<input type="submit" value="确认提交">
</form>
<script>
function check(input) {
var password = document.getElementById("password");
var password_error = document.getElementById("password_error");
if (input.value != password.value) {
password_error.innerHTML = "两次输入的密码不一致,请重新输入";
input.setCustomValidity('两次输入的密码不一致!');
} else {
password_error.innerHTML = "";
input.setCustomValidity('');
}
}
</script>
```
其中,`required`属性可以让表单输入框变为必填项,`oninput`属性可以让确认密码输入框在用户输入时实时检查两次密码是否一致。当两次密码不一致时,`setCustomValidity`方法会设置一个自定义的错误信息,提示用户重新输入密码,并且在页面上显示一个红色的错误提示信息。当两次密码一致时,错误提示信息会被清空。
阅读全文