(1)注册登录按钮的点击事件,进行用户名和密码验证 (2)点击登录按钮时,用户名是admin,密码是123456,则弹出提示框提示“登录成功”,否则就提示“登录失败”。
时间: 2024-03-17 09:46:05 浏览: 24
好的,这是一个关于登录验证的问题。以下是一个简单的实现过程:
1. 在 HTML 中创建一个表单,包括用户名和密码的输入框以及一个登录按钮,例如:
```
<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="button" id="loginBtn">登录</button>
</form>
```
2. 在 JavaScript 中获取用户名和密码的输入框以及登录按钮,并为登录按钮添加点击事件:
```
const usernameInput = document.querySelector('#username');
const passwordInput = document.querySelector('#password');
const loginBtn = document.querySelector('#loginBtn');
loginBtn.addEventListener('click', function() {
// 在这里编写验证用户名和密码的代码
});
```
3. 在点击事件中编写验证用户名和密码的代码:
```
const username = usernameInput.value;
const password = passwordInput.value;
if (username === 'admin' && password === '123456') {
alert('登录成功');
} else {
alert('登录失败');
}
```
完整的代码如下所示:
```
<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="button" id="loginBtn">登录</button>
</form>
<script>
const usernameInput = document.querySelector('#username');
const passwordInput = document.querySelector('#password');
const loginBtn = document.querySelector('#loginBtn');
loginBtn.addEventListener('click', function() {
const username = usernameInput.value;
const password = passwordInput.value;
if (username === 'admin' && password === '123456') {
alert('登录成功');
} else {
alert('登录失败');
}
});
</script>
```
希望这能帮到你。
相关推荐
![java](https://img-home.csdnimg.cn/images/20210720083646.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)