简单的登录注册-登录

最新推荐文章于 2023-06-03 15:47:53 发布

martinlpy

最新推荐文章于 2023-06-03 15:47:53 发布

阅读量129

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/m0_69045017/article/details/123914790

版权

<!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>Document</title>
    <style>
        form {
            width: 400px;
            margin: 0 auto;
            border: 1px solid red;
            text-align: center;
            padding: 30px;
        }

        label {
            width: 120px;
            display: inline-block;
            text-align: right;
        }

        input {
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <h1>登录页面</h1>
    <form id="form">
        手机号：<input type="text" id="mobile" name="mobile"><br>
        密&#x3000;码：<input type="text" id="password" name="password"><br>
        <button type="submit">登录</button>
    </form>

    <script src="./md5.js"></script>
    <script>
        var form = document.getElementById('form');
        var mobile = document.getElementById('mobile');
        var password = document.getElementById('password');


        form.onsubmit = function () {
            event.preventDefault();

            // 验证手机号
            var patt = /^1[3-9]\d{9}$/;
            if (!patt.test(mobile.value)) return alert('请输入正确的手机号！');
            // 验证密码
            if (!password.value) return alert('请输入密码');


            // 验证通过，发送请求
            var data = new FormData(form);
            data.set('password', hex_md5(password.value));

            fetch('http://39.103.177.112:3008/api/login', {
                method: 'post',
                body: data
            }).then(res => res.json()).then(res => {
                console.log(res);
                if (res.code === 1) {
                    // 将uuid存到本地储存里面   
                    // localStorage在不同网站之间，储存的内容是不共享的
                    localStorage.setItem('uuid', res.uuid);
                    location.href = './index.html';
                } else {
                    alert(res.message);
                }
            })
        }

    </script>
</body>

</html>