3.页面html,带有用户名,密码,手机号输入框和两个按钮,点击登录按钮,判断验证输入格式后,将输入框中的内容组成对象存到本地存储中﹔点击获取按钮,从本地储存中获取到存入的手机号。
时间: 2024-02-27 18:56:57 浏览: 21
好的,这是一个关于网页开发的问题。首先,页面的 HTML 代码可以如下编写:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
</head>
<body>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<label for="phone">手机号:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{11}"><br><br>
<button type="button" id="login">登录</button>
<button type="button" id="get_phone">获取手机号</button>
</form>
<script>
const loginBtn = document.querySelector('#login');
const getPhoneBtn = document.querySelector('#get_phone');
loginBtn.addEventListener('click', () => {
const username = document.querySelector('#username').value.trim();
const password = document.querySelector('#password').value.trim();
const phone = document.querySelector('#phone').value.trim();
if (!username || !password || !phone) {
alert('请输入完整信息');
return;
}
const phonePattern = /^[0-9]{11}$/;
if (!phonePattern.test(phone)) {
alert('请输入正确的手机号');
return;
}
const userInfo = { username, password, phone };
localStorage.setItem('userInfo', JSON.stringify(userInfo));
alert('登录成功');
});
getPhoneBtn.addEventListener('click', () => {
const userInfo = JSON.parse(localStorage.getItem('userInfo'));
if (!userInfo) {
alert('请先登录');
return;
}
const phone = userInfo.phone;
alert(`手机号:${phone}`);
});
</script>
</body>
</html>
```
上面的代码中,我们定义了一个表单,包括了用户名、密码和手机号的输入框,以及一个登录按钮和一个获取手机号的按钮。在登录按钮被点击时,我们会验证输入框中的内容是否完整和手机号格式是否正确,如果验证通过,就将输入的信息组成一个对象存储到 localStorage 中。在获取手机号的按钮被点击时,我们会从 localStorage 中获取到存储的用户信息,并将其中的手机号显示出来。
需要注意的是,为了保证代码的安全性,我们没有将用户信息直接存储在 localStorage 中,而是将其转换成了 JSON 格式。在获取用户信息时,我们也需要将其从 JSON 格式转换回来。