登录注册页实现表单校验功能,要求用户名、密码长度6-16位,提交时不能为空,密码不能包含用户名
时间: 2023-10-24 19:06:44 浏览: 167
实现表单校验功能可以使用 JavaScript。以下是一个简单的示例代码:
HTML 代码:
```html
<form id="login-form" action="#" method="post">
<div>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<span id="username-info"></span>
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<span id="password-info"></span>
</div>
<button type="submit">登录</button>
</form>
```
JavaScript 代码:
```javascript
var form = document.getElementById("login-form");
var username = document.getElementById("username");
var password = document.getElementById("password");
var usernameInfo = document.getElementById("username-info");
var passwordInfo = document.getElementById("password-info");
form.addEventListener("submit", function(event) {
// 阻止表单提交
event.preventDefault();
// 校验用户名
if (username.value.length < 6 || username.value.length > 16) {
usernameInfo.textContent = "用户名长度必须为6-16位";
return;
}
// 校验密码
if (password.value.length < 6 || password.value.length > 16) {
passwordInfo.textContent = "密码长度必须为6-16位";
return;
}
if (password.value.indexOf(username.value) >= 0) {
passwordInfo.textContent = "密码不能包含用户名";
return;
}
// 提交表单
form.submit();
});
```
上述代码中,首先获取了表单元素和用户名、密码输入框的元素。然后给表单添加了一个提交事件的监听器,在事件处理函数中进行表单校验。如果校验不通过,就在相应的提示信息元素中显示错误信息,并返回。如果校验通过,则提交表单。
阅读全文