脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 原生js写注册登录页面

带你用原生js写一个简单的注册登录页面

 更新时间：2023年06月29日 10:52:47   作者：一路向东.  
这篇文章主要给大家介绍了关于如何使用原生js写一个简单的注册登录页面的相关资料,文中介绍了一个以js验证表单的简洁的注册登录页面,需要的朋友可以参考下

1.首先是我们的注册页面

这是我们的html骨架 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
</head>
<link rel="stylesheet" href="./css/common.css" rel="external nofollow" >
<style>
    body {
        width: 100%;
        height: 100%;
        background-image: url(./img/RE53tTA.jfif);
        background-repeat: no-repeat;
        background-size: cover;
    }
</style>
<body>
    <div class="header">
        <h2>注册</h2>
        </span>
        <label for="username"><span>用户名：</span><input type="text" id="use"></label>
        <br>
        <label for="password"><span>密码:</span><input type="password" id="pwd"></label>
        <br>
        <label for="password"><span>确认密码 </span><input type="password" id="pwd2"> </label>
        <br>
        <div>
            <button onclick="login()">注册</button>
            <button><a href="./登录.html" rel="external nofollow" >去登录</a></button>
        </div>
    </div>
</body>
</html>

这是css样式

* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
}
.header {
  width: 400px;
  height: 450px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  margin: 100px 0 0 200px;
  padding: 20px;
}
.header h2 {
  font-size: 24px;
  margin-top: 15px;
  color: rgba(255, 255, 255, 0.7);
}
.header > label {
  margin-top: 40px;
  width: 350px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header > label span {
  font-size: 24px;
  color: #fff;
}
.header > label input {
  border-radius: 20px;
  border: 1px solid #ccc;
  padding: 0 20px;
  background-color: rgba(255, 255, 255, 0.6);
  box-sizing: border-box;
  outline: none;
  width: 240px;
  height: 30px;
  font-size: 18px;
}
.header > div {
  margin-top: 30px;
  display: flex;
  justify-content: space-around;
  width: 325px;
}
.header > div button {
  width: 100px;
  height: 30px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 12px;
  font-size: 18px;
  color: #fff;
}

下面就是我们注册的js封装了

这里的函数调用直接写到了html里面的button事件上面了

 <script>
        //获取用户名;
        let useA = localStorage.getItem('username');
        console.log(useA);
        //封装注册方法
        function login() {
            //获取事件的value 
            let username = document.querySelector('#use').value;
            let password = document.querySelector('#pwd').value;
            //这里调用存入本地的数据
            Date(username, password);
        }
        //将数据存入本地
        function Date(username, password) {
            localStorage.setItem(username, JSON.stringify({
                username,
                password,
                tag: false
            }))
            if (username === '' || password === '') {
                alert('请先注册');
            }
            //判断两次密码是否一样
            else if (pwd.value != pwd2.value) {
                //不一样的话重新输入
                alert('两次输入密码不一样 请重新输入');
            } else {
                //一样则提示注册成功
                alert('注册成功 ! ! !')
            }
        }
    </script>

这就是我的注册页面 ,当然各位要是觉得不好看也可以换成自己喜欢的图片；

2.登陆页面

到这里当然要写我们的登录页面了，从注册页面获取数据 然后调用

html样式

<body>
    <div class="header">
        <h2>登录</h2>
        <label for="username"><span>用户名：</span><input type="text" id="use"></label>
        <br>
        <label for="password"><span>密码:</span><input type="password" id="pwd"></label>
        <br>
        <div class="pwsd">
            <input type="checkbox" id="cbx"><span>记住密码</span>
        </div>
        <div class="del">
            <button onclick="login()">登录</button>
            <button><a href="./注册.html" rel="external nofollow" >去注册</a></button>
        </div>
    </div>
</body>

css样式

<style>
    a {
        text-decoration: none;
        color: #fff;
    }
    body {
        width: 100%;
        height: 100%;
        background-image: url(./img/RE53r3l.jfif);
        background-repeat: no-repeat;
        background-size: cover;
    }
    .header {
        width: 400px;
        height: 450px;
        background: rgba(0, 0, 0, .2);
        border-radius: 14px;
        display: flex;
        flex-direction: column;
        margin: 100px 0 0 200px;
        padding: 20px;
    }
    h2 {
        font-size: 24px;
        color: #fff;
    }
    label {
        margin-top: 40px;
        width: 350px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    label>span {
        font-size: 24px;
        color: #fff;
    }
    label>input {
        border-radius: 20px;
        border: 1px solid #ccc;
        padding: 0 20px;
        background-color: rgba(255, 255, 255, .6);
        box-sizing: border-box;
        outline: none;
        width: 240px;
        height: 30px;
        font-size: 18px;
    }
    .del {
        margin-top: 30px;
        display: flex;
        justify-content: space-around;
        width: 325px;
    }
    .pwsd {
        display: flex;
        margin-top: 45px;
    }
    .pwsd>input {
        width: 24px;
        height: 24px;
    }
    .pwsd>span {
        font-size: 18px;
        color: #fff;
        margin-left: 20px;
    }
    button {
        width: 100px;
        height: 40px;
        background: rgba(0, 0, 0, .6);
        border: none;
        border-radius: 12px;
        font-size: 18px;
        color: #fff;
    }
</style>

js样式

 
        <script>
            let use = document.getElementById('use');
            let pwd = document.getElementById('pwd');
            let cbx = document.getElementById('cbx');
            function login() {
                //登录
                //取出本地的用户的值
                let dateUse = localStorage.getItem(use.value);
                console.log(dateUse)
                let dateObj = JSON.parse(dateUse);//将取出的值转化为对象
                console.log(dateObj);
                if (use.value == dateObj.username && pwd.value == dateObj.password) {
                    alert('登陆成功');
                    dateObj.tag = cbx.checked;
                    localStorage.setItem(use.value, JSON.stringify(dateObj));//再将取出的值转化为字符串类型
                    location.href = 'https://www.baidu.com';//登录成功则跳转到百度页面
                } else {
                    alert('用户名或者密码错误')
                }
            }
            use.onblur = function () {//用户失去焦点事件s
                //取出用户的值
                let res = localStorage.getItem(use.value);
                //将用户值转化为对象
                res = JSON.parse(res);
                if (res != null && res.tag) {//本地是否有该账号
                    cbx.checked = true;
                    pwd.value = res.password;
                }
            }
        </script>

样品展示：

总结

到此这篇关于用原生js写一个简单的注册登录页面的文章就介绍到这了,更多相关原生js写注册登录页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 简述冻结JS对象方法技术

    简述冻结JS对象方法技术

    本文主要介绍了冻结JS对象方法技术，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • 基于VSCode调试网页JavaScript代码过程详解

    基于VSCode调试网页JavaScript代码过程详解

    这篇文章主要介绍了基于VSCode调试网页JavaScript代码过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • JS实现前端页面的搜索功能

    JS实现前端页面的搜索功能

    这篇文章主要介绍了JS实现前端页面的搜索功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
    2018-06-06
  • JavaScript实现body内任意节点的自定义属性功能示例

    JavaScript实现body内任意节点的自定义属性功能示例

    这篇文章主要介绍了JavaScript实现body内任意节点的自定义属性功能,涉及javascript针对DOM节点的获取及属性设置相关操作技巧,需要的朋友可以参考下
    2017-09-09
  • contains和compareDocumentPosition 方法来确定是否HTML节点间的关系

    contains和compareDocumentPosition 方法来确定是否HTML节点间的关系

    一个很棒的 blog 文章，是 PPK 两年前写的，文章中解释了 contains() 和 compareDocumentPosition() 方法运行在他们各自的浏览器上。
    2011-09-09
  • js的[defer]和[async]属性

    js的[defer]和[async]属性

    这篇文章主要介绍了js的<script>的[defer]和[async]属性,需要的朋友可以参考下
    2014-11-11
  • 原生js实现简单贪吃蛇小游戏

    原生js实现简单贪吃蛇小游戏

    这篇文章主要为大家详细介绍了原生js实现贪吃蛇小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • 基于javascript实现彩票随机数生成（升级版）

    基于javascript实现彩票随机数生成（升级版）

    这篇文章主要为大家详细介绍了基于javascript实现彩票随机数生成的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 详谈for循环里面的break和continue语句

    详谈for循环里面的break和continue语句

    下面小编就为大家带来一篇详谈for循环里面的break和continue语句。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • js中getter和setter用法实例分析

    js中getter和setter用法实例分析

    这篇文章主要介绍了js中getter和setter用法,结合实例形式分析了javascript中getter和setter的功能、使用方法及相关操作注意事项,需要的朋友可以参考下
    2018-08-08

最新评论