脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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写注册登录页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论