实现一个简单的登录页面
实现一个简单的登录页面
设计了一个登录页面,感觉还挺不错的
实现效果
设计的还是挺好看的吧
分析需要的功能
- 一个登录页面一个注册页面
- 翻转效果
- 输入后的正则判断,给用户提示信息
- 翻转要清空页面的全部信息
- 点击注册后给用户反馈是否注册成功
- 点击登录后验证是否成功
实现过程
翻转效果
实现点击新用户注册,转到注册页面,点击已有账号,转到登录页面
将登录页面和注册页面通过定位叠在一起,再将注册页面旋转180度,再用一个外层盒子包裹着这2个页面,这样只需转动外层盒子就能实现2个页面的交替出现效果
这部分需要与css配合使旋转的效果更加有立体感
register.onclick = function () {loginBox.style.transform = 'translateX(-50%) rotateY(180deg) ';//旋转180deg,前面的移动值,是之前css部分就有的,所以要保留下来login.style.display = 'none';//登录页面消失container.style.display = 'block';//出现注册页面clear();//这个函数很简单,就是将页面的输入框还有那些提示信息遍历一遍,将里面的值清掉
}
before.onclick = function () {loginBox.style.transform = 'translateX(-50%) rotate(360deg) ';container.style.display = 'none';login.style.display = 'block';clear();
}
正则判断
在注册页面中一共有5个输入框,密码和电话号码需要进行正则判断,分开写代码会过于冗余,所以,还是通过数组索引来实现,把正则表达放到数组中,因为前2个输入框是不需要进行正则判断的,所以当i>2
时,再进行正则判断,这样就能通过一个for循环就解决了,页面中还有一个需要判断的内容是,二次输入密码,需要判断是否和前面输入的一致,也就是i==3
的时候
其实这个正则判断并不算难,但是要注意的点很多,大家在做的时候需要注意一下,不要把文本框和正则判断对应关系弄错了
这里我有一个疑问希望大佬能解决一下,我想用一个正则表达式表示
什么都可以
也就是单纯的想占个数组位,不让它报错,要怎么实现?
let register_input = container.querySelectorAll('input'); //所有的注册信息 这个获取的是注册页面所有的文本框
/* 正则表达式 */
let telReg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;//电话号码的正则表达
let psdReg = /\w{6,18}$/;//设置密码为6,18位,只能包含字母、数字和下划线
let reg = [psdReg, psdReg, telReg];//把正则表达式放到数组中,这样可以通过遍历实现
for (let i = 0; i < register_input.length; i++) {register_input[i].onblur = function () {if (i >= 2) {if (!reg[i - 2].test(register_input[i].value)) {// 如果不符合正则表达,弹出提示信息this.nextElementSibling.style.display = 'block';} else {this.nextElementSibling.style.display = 'none';}}if (i == 3) {if (this.value == register_input[2].value) {// 如果两次输入的密码不一致,弹出提示信息this.nextElementSibling.style.display = 'none';} else {this.nextElementSibling.style.display = 'block';}}}}
ajax 实现注册
这里用的是jquery
来实现的,用自己封装的ajax
函数,也是可以的,比较懒,还是用ajax
吧,这个接口是后台的师兄给的,我也不知道接口方面的东西,所以接口地址就不放出来了
在点击注册按钮后,我们需要最后判断一遍,输入框中的信息是否符合我们的正则表达,以及2次密码是否相同,如果都满足我们才调用ajax
向服务器发送注册请求,否则后台的数据可能会异常,这里我是引入了一个布尔值来做标志,当全部输入内容正确时才能发送请求,注册成功后,给用户一个注册成功的提示,并清空页面
register_btn.onclick = () => {let judge = true;for (let i = 2; i < register_input.length; i++) {if (!reg[i - 2].test(register_input[i].value)) {judge = false;}}if (register_input[2].value != register_input[3].value) {judge = false;register_input[3].nextElementSibling.style.display = 'block';} else {register_input[3].nextElementSibling.style.display = 'none';}//判断输入信息if (judge) {$.ajax({type: 'POST',url: 'http://www.XXXXXXXX',data: {username: register_input[0].value,password: register_input[2].value,name: register_input[1].value,phone: register_input[4].value},success: res => {if (res.code == 200) {console.log(res);register_true.style.display = 'block';//提示框setTimeout(() => {register_true.style.display = 'none';//2s后提示消失}, 2000)clear();//清空输入框} else {alert('账号已存在,请更改账号后重试');}}})} else {alert('请按提示修改个人信息');}
}
登录操作
登录操作真的是非常简单了,点击登录,判断服务器端返回的状态码,如果是200就是成功,就进行页面跳转,进入网站,失败则弹出错误信息
login_btn.onclick = function () {$.ajax({type: 'POST',url: ' http://www.XXXXXX',data: {username: login_input[0].value,password: login_input[1].value},success: function (res) {console.log(res);if (res.code == 200) {loginBox.style.display = 'none';//如果登录成功了,登录页面就消失go(res);//这个函数是登录成功后的跳转函数} else {err.style.display = 'block';setTimeout(() => {err.style.display = 'none';}, 2000)}},error: function (er) {console.log('error');}})}
以上就是实现登录操作的分析了
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>Document</title><link rel="stylesheet" href="css/login.css"><link rel="stylesheet" href="css/button.css"><script src="js/jquery.js"></script><script src="js/index.js"></script>
</head><body><div class="loginBox"><div class="container"><div class="title">小A超级VIP注册页面</div><div class="information"><input type="text" placeholder="账号" id="myname"><label></label></div><div class="information"><input type="name" placeholder="姓名"><label>请输入正确的姓名</label></div><div class="information"><input type="password" placeholder="密码" id="psd_input"><label class="label_psd">长度在6~18之间,只能包含字母、数字和下划线</label></div><div class="information"><input type="password" placeholder="再次输入密码"><label>密码不一致</label></div><div class="information"><input type="tel" placeholder="手机号"><label>请输入正确的手机号</label></div><button class="btn" id="newBtn">注册</button><br><button class="loginBtn" id="before">已有账号,返回登录界面</button><span class="true err">注册成功,请登录</span></div><div class="login"><div class="title">小A超级VIP登录页面</div><div class="information"><input type="text" placeholder="账号" id="login_name"></div><div class="information"><input type="password" placeholder="密码" id="login_psd"></div><button class="btn" id="login_btn">登录</button><br><button class="loginBtn" id="register">新会员注册</button><span class="err">用户名不存在或密码错误</span></div></div><h1 id="results"></h1>
</body></html>
CSS代码
* {margin: 0;padding: 0;
}body {font-family: sans-serif;background: url(../imgs/5.jpg) no-repeat;background-size: cover;perspective: 1000px;
}.loginBox {display: flow-root;position: relative;left: 50%;width: 400px;height: 370px;margin-top: 35px;transform: translateX(-50%);transition: all .4s;transform-style: preserve-3d;
}.container,
.login {position: absolute;top: 0;width: 400px;background-color: rgba(0, 0, 0, .8);text-align: center;border-radius: 20px;
}.container {display: none;transform: rotateY(180deg);
}.title {color: white;font-size: 24px;margin: 30px 0px;user-select: none;
}button {text-align: center;
}input {width: 200px;height: 26px;margin: 5px;outline: none;border: none;color: white;border-bottom: 1px solid #fff;background-color: transparent;text-indent: 1em;
}input::placeholder {user-select: none;color: white;opacity: .5;
}.btn {margin: 10px 0px;
}.loginBox .container div {position: relative;
}label {display: none;position: absolute;top: 50%;right: 5px;width: 33%;color: white;font-size: 12px;background-color: rgba(0, 0, 0, .8);padding: 0px 5px;border-radius: 5px;transform-origin: right;transform: translateY(-50%) scale(.7);
}.login .err,
.container .err {display: none;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(.7);font-size: 12px;color: white;padding: 4px;background-color: rgba(0, 0, 0, .8);border-radius: 10px;z-index: 1;
}#results {text-align: center;color: white;margin-top: 100px;user-select: none;
}
按钮的样式在另一篇博客里有写过,这篇:炫彩按钮
js代码就不贴出来了,如需完整代码可以私信或者留言
实现一个简单的登录页面相关推荐
- 写一个简单的登录页面!!!(html)
写一个简单的登录页面!!! 大家好,我是伍柒. 今天我又双叒叕发现了一个好东西. 那就是用html做一个登录页面 那,该如何做呢? 首先 现在html里的body里写 一个头部header标签(双标签 ...
- element ui登录界面_Vue和Element-UI做一个简单的登录页面
如下所示,是vue+ElementUI写的一个登录页面: Login.vue部分 class="demo-ruleForm login-container"> 登陆界面 记住 ...
- Vue实现一个简单的登录页面【自定义】
创建一个自定义插件 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- 一个简单的登录页面,效果不错哦!
效果图: jsp代码: <%@ page contentType="text/html; charset=utf-8" language="java"%& ...
- Android开发实现简单QQ登录页面
Android开发实现极为简单的QQ登录页面 设计一个简单QQ登录页面,无任何功能.然后打包安装到手机. 1.首先创建一个空白页面 2.打开样式设计的页面 在activity_main.xml中写入代 ...
- 小白教程——Windows下用PHP写一个简单的登录注册页面(二)
哈喽,看到这里希望小伙伴们都把wampserver环境安装好了,如果还没有安装或创建数据表就移步去看我上一篇文章吧.OK~接下我们将进入代码实现部分,首先我们需要一个文本编辑器,可以是电脑自带的not ...
- 用html和css语言编写一个登录页面,简单css登录页面
CSS布局HTML小编今天和大家分享一个简单的登录界面CSS代码 登 陆 微信登陆QQ登陆 注 册 #zuo{ width: 500px; height: 540px; background: whi ...
- mvc登录实例 mysql_spring mvc + mybatis + mysql 调整的一个简单的登录例子
spring mvc + mybatis + mysql 整合的一个简单的登录例子 今天用spring跟mybatis整合写了一个简单的登录例子,第一次整合,给自己做个笔记,可能注释写的有点少,做的不 ...
- 用 Flutter 写一个精美的登录页面(最新版)
用 Flutter 写一个精美的登录页面(最新版) 主体结构 标题 输入框 登录按钮 其他登录方式 注册按钮 完整源码 参考了博客:用flutter写一个精美的登录页面.但是那篇文章是 18 年的,较 ...
最新文章
- Thonny开发环境中显示数据曲线
- ASP.NET自带机制不刷新页面
- 取得COM对象的UUID并以string输出
- python的for循环语句怎么写_python中的for循环语句怎么写
- Puppy Linux U盘 Linux
- API接口设计 注意问题
- 不同声音的传播速度会一样吗?
- 通用型CRM还是行业型CRM?-定制为王
- centos 切换用户_Centos7系统切换Python2到Python3.x
- 3dsMax7数据导出方法及存在问题
- vs哪个版本比较好用_哪个跨境电商erp比较好用,跨境电商erp哪个好一点
- 华为手机海拔测试软件,华为手机海拔高度测量仪
- 车载以太网测试:以太网测什么
- Python 玩转数据 19 - 数据操作 正则表达式 Regular Expressions 搜索模式匹配
- C语言this is a string,求一道C语言题目The aim of this exercise is to write a C program tha
- MobData活动预告 | 数据智能助力文创产业发展
- html5 视频缩略图,应用canvas获取video的缩略图
- Yolo-V4数据增强
- 开淘宝店怎么注册公司?开淘宝店是否需要去工商局登记注册公司
- C语言从入门到精通——指针基础
热门文章
- bit.ly 短地址转换_使用PHP创建Bit.ly短URL
- 精典的古代情诗,程序员追MM不可缺少.....
- mysql 根据分数分等级_数分面试-SQL篇
- 深度优先搜索及python实现围棋“吃子”
- LInux目录与路径
- Linux系统查看gcc,g++,java 等的版本
- python爬虫 知乎_python爬虫——知乎(关于python的精华回答)
- 第23课:专项能力修炼
- 如何提升论文写作能力?
- java技术体系中的三个主要分支是_计算智能的三个主要分支及其应用