唐初初 2021-07-07 09:58 采纳率: 66.7%
浏览 140
已采纳

实现一个登陆注册功能

上机题目
实现一个登录注册功能 （页面原型在文档最后）
需求说明：
1.点击顶部登录切换到登录页面、点击注册切换到注册页面
2.点击页面中注册按钮校验用户名、邮箱、密码是否为空如果为空给出相对应的提示。
3.点击页面中登录页面校验邮箱、密码是否为空如果为空给出相对应的提示。
4.点击页面中登录、注册按钮利用ajax向后端(台)发送请求并提交数据，来实现注册和登录功能。（参考接口文档）
接口文档：
1.用户注册：
请求地址 请求方式
http://8.140.34.53:3000/api/signup POST
请求参数（所有参数必传） 接口数据返回结果实例
{
"name": "段誉", // 用户名
"email": "duanyu@163.com", // 邮箱
"password": "123456" // 密码
} {
"role": 0,
"history": [],
"_id": "5fab5fd13a2a5429fcd53719",
"name": "段誉",
"email": "duanyu@163.com",
"createdAt": "2020-11-11T03:51:45.805Z",
"updatedAt": "2020-11-11T03:51:45.805Z",
"__v": 0
}

2.用户登录：
请求地址（所有参数必传） 请求方式
http://8.140.34.53:3000/api/signin POST
请求参数（所有参数必传） 接口数据返回结果实例
{
"email": "duanyu@163.com", // 邮箱
"password": "123456" // 密码
} {
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
"user": {
"_id": "5f9d6f70f75ae3c81541bcba",
"name": "乔峰",
"email": "qiaofeng@163.com",
"role": 1
}
}

页面原型图:

img

img

  • 写回答

1条回答 默认 最新

  • 老实巴交的小农民 2021-07-07 11:11
    关注
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            width: 300px;
            height: 300px;
            border: 1px solid #bbb;
        }

        .login {
            float: left;
        }

        .register {
            float: left;
        }

        .loginInput {}

        .registerInput {
            display: none;
        }
    </style>
</head>

<body>

    <div class="main">

        <div class="login">登录</div>
        <div class="register">注册</div><br />
        <div class="loginInput"><input type="text" placeholder='邮箱' class="mailboxLogin"><input type="text"
                placeholder='密码' class="passwordLogin"><br />
            <div class="messageLogin"></div><button class="loginBtn">登录</button>
        </div>
        <div class="registerInput"><input type="text" placeholder='用户名' class="userNameRegister"><input type="text"
                placeholder='邮箱' class="mailboxRegister"><input type="text" placeholder='密码'
                class="passwordRegister"><br />
            <div class="messageRegister"></div><button class="registerBtn">注册</button>
        </div>
    </div>

    <script src="./jquery.min.js"></script>
    <script>
        $('.login').click(function () {
            $(".registerInput").css("display", "none");
            $(".loginInput").css("display", "block");
        })
        $('.register').click(function () {
            $(".loginInput").css("display", "none");
            $(".registerInput").css("display", "block");
        })
        var reg = new RegExp('^([a-zA-Z0-9]+[_|\\_|\\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\\_|\\.]?)*[a-zA-Z0-9]+\\.[a-zA-Z]{2,3}$', '');
        $('.loginBtn').click(function () {
            String.prototype.NoSpace = function () {
                return this.replace(/\s+/g, "");
            };
            var messageLogin = ''
            if (reg.test($('.mailboxLogin').val().NoSpace()) === false) {
                messageLogin = '邮箱格式错误'
            } else if ($('.passwordLogin').val().NoSpace() == '') {
                messageLogin = '密码为空'
            } else {
                $.ajax({
                    type: 'POST',
                    url: 'http://8.140.34.53:3000/api/signin',
                    data: { 'email': $('.mailboxRegister').val(), 'password': $('.passwordRegister').val() },
                    success: function (data) {
                        console.log(data);
                    }
                })
            }
            $('.messageLogin').text(messageLogin)
        })
        $('.registerBtn').click(function () {
            String.prototype.NoSpace = function () {
                return this.replace(/\s+/g, "");
            };
            var messageRegister = ''
            if ($('.userNameRegister').val().NoSpace() == '') {
                messageRegister = '用户名为空'
            } else if (reg.test($('.mailboxRegister').val().NoSpace()) === false) {
                messageRegister = '邮箱格式错误'
            } else if ($('.passwordRegister').val().NoSpace().length < 6) {
                messageRegister = '密码要大于六位数'
            } else {
                $.ajax({
                    type: 'POST',
                    url: 'http://8.140.34.53:3000/api/signup',
                    data: { 'name': $('.userNameRegister').val(), 'email': $('.mailboxRegister').val(), 'password': $('.passwordRegister').val() },
                    success: function (data) {
                        console.log(data);
                    }
                })
            }
            $('.messageRegister').text(messageRegister)
        })
    </script>
</body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题