登录注册页实现表单校验功能,要求用户名、密码长度6-16位,提交时不能为空,密码不能包含用户名,否则提示错误。
时间: 2023-08-15 09:05:19 浏览: 462
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
这个功能可以通过前端 JavaScript 实现。以下是一个简单的实现示例:
HTML 代码:
```
<form id="register-form">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<button type="submit">注册</button>
</form>
```
JavaScript 代码:
```
const form = document.getElementById('register-form');
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
const username = document.getElementById('username').value.trim();
const password = document.getElementById('password').value.trim();
// 校验用户名和密码是否符合要求
if (username.length < 6 || username.length > 16) {
alert('用户名长度必须为6-16位');
return;
}
if (password.length < 6 || password.length > 16) {
alert('密码长度必须为6-16位');
return;
}
if (username === password) {
alert('密码不能包含用户名');
return;
}
// 如果通过校验,可以将表单提交到后端进行处理
alert('注册成功!');
});
```
上面的代码中,我们首先获取了用户名和密码的值,并使用 `trim()` 方法去除首尾空格。然后对用户名和密码进行校验,如果不符合要求则弹出提示信息,阻止表单提交。最后,如果通过了校验,则可以将表单提交到后端进行处理。
阅读全文