android系统定制开发实现一个简单的登录页面
android系统定制开发设计了一个登录页面，android系统定制开发感觉还挺不错的
实现效果
android系统定制开发设计的还是挺好看的吧
android系统定制开发分析需要的功能
- 一个登录页面一个注册页面
- 翻转效果
- 输入后的正则判断，给用户提示信息
- 翻转要清空页面的全部信息
- 点击注册后给用户反馈是否注册成功
- 点击登录后验证是否成功
实现过程
翻转效果
实现点击新用户注册，转到注册页面，点击已有账号，转到登录页面
将登录页面和注册页面通过定位叠在一起，再将注册页面旋转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();}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
正则判断
在注册页面中一共有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'; } } }}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
实现注册
这里用的是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('请按提示修改个人信息'); }}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
登录操作
登录操作真的是非常简单了，点击登录，判断服务器端返回的状态码，如果是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'); } })}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
以上就是实现登录操作的分析了
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
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;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
按钮的样式在另一篇博客里有写过，这篇：
js代码就不贴出来了,如需完整代码可以私信或者留言