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

实现一个登陆注册功能

上机题目
实现一个登录注册功能 (页面原型在文档最后)
需求说明:
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>
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题