设计一个用户登录时数据合法性验证功能,具体要求:(1)必填验证:用户名、密码框必须有值。 (2)有效性验证:用户名:密码长度大于等于8个字符,小于等于20个字符。 (3)当提交表单数据时,如果输入框中数据不合法,则给出相应的提示信息并将焦点聚焦到相应的输入框上。
时间: 2023-07-16 19:15:46 浏览: 101
为实现这个功能,可以使用前端 JavaScript 来对用户输入数据进行验证。以下是一个简单的实现:
HTML 代码:
```
<form id="login-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('login-form');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
form.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止表单默认提交行为
// 验证必填项
if (!usernameInput.value) {
alert('请输入用户名!');
usernameInput.focus();
return;
}
if (!passwordInput.value) {
alert('请输入密码!');
passwordInput.focus();
return;
}
// 验证有效性
if (usernameInput.value.length < 8 || usernameInput.value.length > 20) {
alert('用户名长度必须大于等于8个字符,小于等于20个字符!');
usernameInput.focus();
return;
}
if (passwordInput.value.length < 8 || passwordInput.value.length > 20) {
alert('密码长度必须大于等于8个字符,小于等于20个字符!');
passwordInput.focus();
return;
}
// 表单数据合法,提交表单
form.submit();
});
```
以上代码首先获取表单元素和输入框元素,然后在表单提交时进行验证。如果输入框中数据不合法,则弹出提示信息并将焦点聚焦到相应的输入框上,阻止表单的默认提交行为。如果表单数据合法,则提交表单。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)