html手机验证码登录页面代码
时间: 2023-11-06 08:02:38 浏览: 70
HTML手机验证码登录页面代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>手机验证码登录</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- 引入jQuery -->
<script type="text/javascript">
$(document).ready(function(){
// 验证码发送按钮点击事件处理
$("#sendCode").click(function(){
// 模拟发送验证码的逻辑,这里只是简单的在控制台输出验证码
var code = Math.floor(Math.random() * 9000) + 1000; // 生成4位随机验证码
console.log("验证码:" + code);
});
// 登录按钮点击事件处理
$("#login").click(function(){
var phone = $("#phone").val(); // 获取输入的手机号码
var code = $("#code").val(); // 获取输入的验证码
// 校验手机号码和验证码的逻辑,这里只是简单的判断手机号码是否为空和验证码是否为4位数
if(phone === "" || code === "" || code.length != 4){
alert("请输入有效的手机号码和验证码!");
} else {
alert("登录成功!");
}
});
});
</script>
</head>
<body>
<h1>手机验证码登录</h1>
<input type="text" id="phone" placeholder="手机号码"><br><br>
<input type="text" id="code" placeholder="验证码"><br><br>
<button id="sendCode">发送验证码</button><br><br>
<button id="login">登录</button>
</body>
</html>
```
以上代码实现了一个简单的手机验证码登录页面,包括手机号码和验证码输入框,发送验证码按钮和登录按钮。点击发送验证码按钮会在控制台输出一个随机生成的4位数验证码,点击登录按钮会校验手机号码和验证码是否有效,并弹出登录成功的提示框。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)