界面添加验证功能,验证用户名和密码不能为空,且至少 6 个字符,当输 入框失去焦点和用户点击登录按钮时必须给出验证提示(用户输入不符合要求时给出提示)
时间: 2024-02-22 13:58:55 浏览: 27
好的,这是一个关于界面验证的问题。您需要在用户输入框失去焦点和用户点击登录按钮时进行验证。以下是实现该功能的基本步骤:
1. 获取用户名和密码输入框的值并进行验证。
2. 如果输入框的值不符合要求,则显示相应的错误提示。
3. 如果输入框的值符合要求,则允许用户进行登录操作。
以下是示例代码:
HTML:
```html
<input type="text" id="username" placeholder="用户名">
<div id="usernameError" class="error"></div>
<input type="password" id="password" placeholder="密码">
<div id="passwordError" class="error"></div>
<button id="login">登录</button>
```
CSS:
```css
.error {
display: none;
color: red;
}
```
JavaScript:
```javascript
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const usernameError = document.getElementById('usernameError');
const passwordError = document.getElementById('passwordError');
const loginButton = document.getElementById('login');
function validateUsername() {
const username = usernameInput.value.trim();
if (username.length === 0) {
usernameError.textContent = '用户名不能为空';
usernameError.style.display = 'block';
return false;
} else if (username.length < 6) {
usernameError.textContent = '用户名不能少于 6 个字符';
usernameError.style.display = 'block';
return false;
} else {
usernameError.style.display = 'none';
return true;
}
}
function validatePassword() {
const password = passwordInput.value.trim();
if (password.length === 0) {
passwordError.textContent = '密码不能为空';
passwordError.style.display = 'block';
return false;
} else if (password.length < 6) {
passwordError.textContent = '密码不能少于 6 个字符';
passwordError.style.display = 'block';
return false;
} else {
passwordError.style.display = 'none';
return true;
}
}
function validateForm() {
const isValidUsername = validateUsername();
const isValidPassword = validatePassword();
return isValidUsername && isValidPassword;
}
function onUsernameBlur() {
validateUsername();
}
function onPasswordBlur() {
validatePassword();
}
function onLoginClick() {
if (validateForm()) {
// 允许用户进行登录操作
}
}
usernameInput.addEventListener('blur', onUsernameBlur);
passwordInput.addEventListener('blur', onPasswordBlur);
loginButton.addEventListener('click', onLoginClick);
```
这段代码定义了三个验证函数:`validateUsername`、`validatePassword` 和 `validateForm`。这些函数分别验证用户名、密码和整个表单是否有效。当输入框失去焦点时,会调用相应的验证函数以显示错误提示。当用户点击登录按钮时,会调用 `validateForm` 函数以验证整个表单是否有效。如果表单有效,则允许用户进行登录操作。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![html](https://img-home.csdnimg.cn/images/20210720083451.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)