关于用js写登陆账号页面

首先获取登陆页面的标签以及按钮

其次验证数据输入格式

判断手机号输入格式是否正确,可以用正则表达式(

if(!(/^1[3-9]\d{9}$/.test(regTel))){

            alert("手机号码有误,请重填");  

            return false;

        }

(需要判断输入账号密码是否正确需要请求后端

        axios.post('http+ip+端口号+文件仿制的地址里面', {

            tel: logintelInput.value,

            passwd: loginpwdInput.value

          },{

            withCredentials: true//允许跨域携带凭证(cookie)

        })

          .then(function (response) {

            console.log(response);

           

            if(response.data.code == 1){//登录成功

                alert('登录成功')

                // 隐藏弹窗

                userform.style.visibility = 'hidden';

                // 隐藏登录注册按钮,显示人的小图标

                navHeadImg.style.display = 'inline-block';

                showuser.style.display   = 'none';

                // 设置cookie

//这里用到了session携带的cookie存储密码账号,需要给cookie设置允许跨域携带凭证

                // setCookie('loginstates',1,7);

                setCookie('account',response.data.data.tel,7);

            }else{

                alert(response.data.data);

            }

          })

          .catch(function (error) {

            console.log(error);

          });

好的,下面是一个简单的登陆注册页面的代码,使用了HTML、CSS和JavaScript: HTML代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登陆注册页面</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="form-container sign-in-container"> <form> <h1>登陆</h1> <input type="email" placeholder="邮箱"> <input type="password" placeholder="密码"> <button>登陆</button> </form> </div> <div class="form-container sign-up-container"> <form> <h1>注册</h1> <input type="text" placeholder="用户名"> <input type="email" placeholder="邮箱"> <input type="password" placeholder="密码"> <button>注册</button> </form> </div> <div class="overlay-container"> <div class="overlay"> <div class="overlay-panel overlay-left"> <h1>欢迎回来!</h1> <p>如果已经有账号,请点击下面的按钮进行登陆。</p> <button class="ghost" id="signIn">登陆</button> </div> <div class="overlay-panel overlay-right"> <h1>注册新账号</h1> <p>注册账号以享受更好的服务。</p> <button class="ghost" id="signUp">注册</button> </div> </div> </div> </div> <script src="app.js"></script> </body> </html> ``` CSS代码: ```css * { box-sizing: border-box; } body { background-color: #f6f5f7; display: flex; flex-direction: column; height: 100vh; margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .container { background-color: #fff; border-radius: 10px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); overflow: hidden; width: 100%; max-width: 900px; margin: auto; } .form-container { position: absolute; top: 0; height: 100%; transition: all 0.6s ease-in-out; } .sign-in-container { left: 0; width: 50%; z-index: 2; } .sign-up-container { left: 0; width: 50%; opacity: 0; z-index: 1; } .overlay-container { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; overflow: hidden; transition: transform 0.6s ease-in-out; z-index: 100; } .overlay { background: linear-gradient(to right, #ff416c, #ff4b2b); background-repeat: no-repeat; background-size: cover; background-position: 0 0; color: #fff; position: relative; left: -100%; height: 100%; width: 200%; transform: translateX(0); transition: transform 0.6s ease-in-out; } .overlay-panel { position: absolute; top: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 40px; height: 100%; width: 50%; text-align: center; transform: translateX(0); transition: transform 0.6s ease-in-out; } .overlay-left { transform: translateX(-20%); } .overlay-right { right: 0; transform: translateX(0); } form { background-color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; text-align: center; padding: 0 50px; overflow: auto; } h1 { font-weight: bold; margin-bottom: 20px; } input { background-color: #ececec; border: none; padding: 12px 15px; margin: 8px 0; width: 100%; border-radius: 20px; } button { border-radius: 20px; border: none; background-color: #ff416c; color: #fff; font-size: 16px; font-weight: bold; padding: 12px 30px; margin-top: 20px; cursor: pointer; transition: all 0.3s ease-in-out; } button:hover { background-color: #ff4b2b; } .ghost { background-color: transparent; border-color: #fff; color: #fff; } @media screen and (max-width: 960px) { .container { border-radius: 0; } .form-container { width: 100%; height: 50%; } .sign-in-container, .sign-up-container { width: 100%; } .overlay-container { width: 100%; left: 0; transform: translateY(100%); } .overlay { width: 100%; left: 0; transform: translateX(0); } .overlay-left, .overlay-right { width: 50%; height: 100%; transform: translateX(0); } .overlay-right { right: 0; } .overlay-left { transform: translateX(-100%); } } ``` JavaScript代码: ```javascript const signUpButton = document.getElementById('signUp'); const signInButton = document.getElementById('signIn'); const container = document.getElementById('container'); signUpButton.addEventListener('click', () => { container.classList.add('right-panel-active'); }); signInButton.addEventListener('click', () => { container.classList.remove('right-panel-active'); }); ``` 以上代码实现了一个简单的登陆注册页面,包括两个表单,一个用于登陆,一个用于注册。还包括一个平滑的转场效果,点击“注册”按钮会滑动到另一个表单,点击“已有账号?请登陆”按钮则会滑动回来。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值