html商城注册页面
时间: 2023-12-08 08:38:31 浏览: 64
以下是一个简单的HTML商城注册页面的示例,包括输入国家/地区和手机号码、获取验证码和注册按钮等功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>商城注册页面</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>商城注册页面</h1>
<form>
<label for="country">国家/地区:</label>
<input type="text" id="country" name="country"><br><br>
<label for="phone">手机号码:</label>
<input type="text" id="phone" name="phone"><br><br>
<button type="button" onclick="sendCode()">获取验证码</button><br><br>
<label for="code">验证码:</label>
<input type="text" id="code" name="code"><br><br>
<button type="button" onclick="register()">立即注册</button>
</form>
<script>
function sendCode() {
// 判断手机号是否符合条件
var phone = document.getElementById("phone").value;
if (!(/^1[3456789]\d{9}$/.test(phone))) {
alert("请输入正确的手机号码!");
return;
}
// 生成随机四位数验证码
var code = Math.floor(Math.random() * 9000 + 1000);
// 输出验证码到控制台
console.log("验证码:" + code);
// 将验证码保存到本地浏览器中
localStorage.setItem("code", code);
// 显示验证码输入框
document.getElementById("code").style.display = "block";
}
function register() {
// 判断验证码是否正确
var code = document.getElementById("code").value;
var savedCode = localStorage.getItem("code");
if (code != savedCode) {
alert("验证码错误!");
return;
}
// 注册成功,保存数据到本地浏览器中
var country = document.getElementById("country").value;
var phone = document.getElementById("phone").value;
localStorage.setItem("country", country);
localStorage.setItem("phone", phone);
alert("注册成功!");
}
</script>
</body>
</html>
```
阅读全文