请生成一段代码,为登陆表单添加验证功能,验证用户名和密码不能为空,且至少6个字符,当输入框失去焦点和用户点击登录按钮时给出验证提示
时间: 2024-02-16 08:02:44 浏览: 34
好的,以下是一个简单的示例代码,用于为登录表单添加验证功能:
HTML 代码:
```html
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required minlength="6">
<br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required minlength="6">
<br>
<button type="submit">登录</button>
</form>
```
JavaScript 代码:
```javascript
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
// 添加失去焦点事件监听器
usernameInput.addEventListener('blur', validateUsername);
passwordInput.addEventListener('blur', validatePassword);
// 添加提交事件监听器
const form = document.querySelector('form');
form.addEventListener('submit', validateForm);
function validateUsername() {
const username = usernameInput.value;
if (username.length < 6) {
usernameInput.setCustomValidity('用户名至少6个字符');
} else {
usernameInput.setCustomValidity('');
}
}
function validatePassword() {
const password = passwordInput.value;
if (password.length < 6) {
passwordInput.setCustomValidity('密码至少6个字符');
} else {
passwordInput.setCustomValidity('');
}
}
function validateForm(event) {
const username = usernameInput.value;
const password = passwordInput.value;
if (username.length < 6 || password.length < 6) {
event.preventDefault(); // 阻止表单提交
alert('用户名和密码都必须至少6个字符');
}
}
```
这段代码会在输入框失去焦点或用户点击登录按钮时,验证用户名和密码是否合法。如果不合法,会显示相应的提示信息。如果用户名和密码都合法,会允许用户提交表单。