用户注册功能: 表单中有用户名,密码,确认密码,及注册按钮; 1.如果直接点"注册",则提示"用户名或密码及确认密码不能为空" 2. 如果输入的密码和确认密码不正确, 点击"注册",则提示"密码和确认密码不正确" 注意:有错误,则不能提交的html代码
时间: 2023-08-10 17:07:23 浏览: 98
javascript注册页面代码
以下是一个简单的用户注册表单的 HTML 代码,其中包含了上述功能的实现:
```html
<form>
<label for="username">用户名:</label>
<input type="text" id="username" required><br>
<label for="password">密码:</label>
<input type="password" id="password" required><br>
<label for="confirm-password">确认密码:</label>
<input type="password" id="confirm-password" required><br>
<button type="submit">注册</button>
</form>
<script>
const form = document.querySelector('form');
const passwordInput = document.querySelector('#password');
const confirmPasswordInput = document.querySelector('#confirm-password');
form.addEventListener('submit', (event) => {
if (!form.checkValidity()) {
event.preventDefault();
alert('用户名或密码及确认密码不能为空');
} else if (passwordInput.value !== confirmPasswordInput.value) {
event.preventDefault();
alert('密码和确认密码不正确');
}
});
</script>
```
在这个表单中,我们使用了 HTML5 中的 `required` 属性来确保用户名、密码和确认密码都不为空。在 JavaScript 中,我们监听了表单的 `submit` 事件,在表单提交之前检查表单的有效性,如果有错误,则阻止表单提交并弹出相应的提示框。
阅读全文