3.页面html带有用户名,密码,手机号输入框和两个按钮,点击登录按钮,判断验证输入格式后,将输入框中的内容组成对象,存到本地存储中;点击获取按钮,从本地储存中获取到存入的手机号。
时间: 2024-02-27 08:58:08 浏览: 16
好的,这是一个包含用户名、密码、手机号输入框和两个按钮的HTML页面,点击登录按钮后会将输入框中的内容组成对象并存储到本地存储中,点击获取按钮后会从本地存储中获取手机号并展示在页面上。
以下是一个示例代码,仅供参考:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h1>Login Page</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone"><br><br>
<input type="button" value="Login" onclick="saveData()">
<input type="button" value="Get Phone Number" onclick="getData()">
</form>
<script>
function saveData() {
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
const phone = document.getElementById("phone").value;
// 验证手机号格式
const phoneRegex = /^[1][3-9][0-9]{9}$/;
if (!phoneRegex.test(phone)) {
alert("请输入正确的手机号码");
return;
}
// 将输入框中的内容组成对象并存储到本地存储中
const data = {
username: username,
password: password,
phone: phone
};
localStorage.setItem("userData", JSON.stringify(data));
alert("数据已保存到本地存储");
}
function getData() {
// 从本地存储中获取存入的手机号
const savedData = JSON.parse(localStorage.getItem("userData"));
if (savedData) {
const phone = savedData.phone;
alert("Phone Number: " + phone);
} else {
alert("没有找到存储的数据");
}
}
</script>
</body>
</html>
```