帮我写一个监听登录按钮的js文件
时间: 2024-05-11 21:14:14 浏览: 13
好的,下面是一个监听登录按钮的示例JS代码:
```javascript
// 获取登录按钮元素
const loginBtn = document.getElementById('login-btn');
// 给登录按钮添加点击事件监听器
loginBtn.addEventListener('click', function() {
// 获取用户名和密码输入框元素
const usernameInput = document.getElementById('username-input');
const passwordInput = document.getElementById('password-input');
// 获取输入框中的值
const username = usernameInput.value.trim();
const password = passwordInput.value.trim();
// 进行登录验证
if (username === '' || password === '') {
alert('用户名和密码不能为空!');
} else {
// 发送登录请求
// ...
}
});
```
这段代码假设你的登录按钮的id为`login-btn`,用户名输入框id为`username-input`,密码输入框id为`password-input`。当用户点击登录按钮时,代码会获取输入框中的值,并进行一些简单的验证。如果用户名或密码为空,会弹出提示框;否则,会发送登录请求(这里需要你自己实现)。
相关推荐
![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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)