【JavaScript】小兔鲜登录页面（2）

最新推荐文章于 2024-05-31 22:41:13 发布

ClearStari99

最新推荐文章于 2024-05-31 22:41:13 发布

阅读量304

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/JackCao_Grass/article/details/130003100

版权

小兔鲜登录页面（2）

需求②：点击登录可以跳转页面

先阻止默认行为
如果没有勾选同意，则提示要勾选
required 属性不能为空
假设登录成功
- 把用户名记录到本地存储中
- 同时跳转到首页 location.href

在这里插入图片描述

JavaScript：

// 点击提交模块
const form = document.querySelector('form')
const agree = document.querySelector('[name=agree]')
const username = document.querySelector('[name=username]')
form.addEventListener('submit', function (e) {
   
    e.preventDefault()
    // 判断是否勾选同意协议
    if (!agree.checked) {
   
        return alert('请勾选同意协议')
    }

    // 记录用户名到本地存储
    localStorage.setItem('xtx-uname', username.value)
    // 跳转到首页
    location.href = './index.html'
})

最后：
HTML：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/login.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">