| 简单登录注册页面（HTML5、CSS、JS） | 您所在的位置：网站首页 › h5用户注册登录系统 › 简单登录注册页面（HTML5、CSS、JS） |
简单登录注册页面（HTML5、CSS、JS）
|
使用HTML5和简单的CSS样式写一个登录注册页面，JS和CSS都在HTML5中 登录代码如下 登录 body { background: url('images/background.jpg') no-repeat; background-size: 100% auto; } #login_box { width: 20%; height: 400px; background-color: #00000085; margin: auto; margin-top: 10%; text-align: center; border-radius: 10px; padding: 50px 50px; } #login_box input, #login_box button { outline: none; } #login_box h2 { color: #ffffff90; margin-top: 5%; } #login_box #form #input_box { margin-top: 5%; } #login_box #form #input_box input { border: 0; width: 60%; font-size: 15px; color: #ffffff; background: #ffffff00; border-bottom: 2px solid #ffffff; padding: 5px 10px; margin-top: 10px; } #login_box button { margin-top: 50px; width: 50%; height: 30px; border-radius: 10px; border: 0; color: #fff; font-size: 15px; background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%); cursor: pointer; } 登 录 登录 注册注册代码增加了JS判断如下 注册 body { background: url('images/background.jpg') no-repeat; background-size: 100% auto; } #loginDiv { width: 20%; height: 400px; background-color: #00000085; margin: auto; margin-top: 10%; text-align: center; border-radius: 10px; padding: 50px 50px; } #name_trip { margin-left: 50px; color: red; } p, .sexDiv { margin-top: 10px; margin-left: 20px; text-align: left; color: azure; } .sexDiv>input { width: 30px; height: 17px; } input, select { margin-left: 15px; border-radius: 5px; border-style: hidden; height: 30px; width: 180px; background-color: rgba(105, 105, 105, 0.5); outline: none; color: #f0edf3; padding-left: 10px; } .button { margin-top: 30px; width: 25%; height: 30px; border-radius: 10px; border: 0; color: #fff; font-size: 15px; background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%); cursor: pointer; } .introduce { margin-left: 110px; } .introduce>textarea { background-color: rgba(216, 191, 216, 0.5); border-style: hidden; outline: none; border-radius: 5px; } h1 { color: #ffffff90; margin-top: 5%; } b { margin-left: 50px; color: #FFEB3B; font-size: 10px; font-weight: initial; } 注 册用户姓名: 用户密码: 确认密码: 用户性别: 男 女电子邮件: function trip(obj, trip) { document.getElementById(obj).innerHTML = "" + trip + ""; } function checkSex() { var sexNum = document.getElementsByName("sex"); var sex = ""; for (let i = 0; i < sexNum.length; ++i) { if (sexNum[i].checked) { sex = sexNum[i]; } } if (sex == "") { trip("sex_trip", "ERROR!!"); return false; } else { trip("sex_trip", "OK!!"); } } function checkForm() { checkSelect(); checkHobby(); checkSex(); var trip = document.getElementsByName("em"); var tripV = trip.inerHTML(); //获取用户名输入项 var userNname = document.getElementById("userNname"); var uName = userNname.value; if (uName.length < 1 || uName.length > 10) { trip("name_trip", "账号长度为1-10位!!"); return false; } else { trip("name_trip", "OK!!"); } //密码长度大于6 和确认必须一致 var password = document.getElementById("password"); var userPass = password.value; if (userPass.length < 6) { trip("password_trip", "密码要>6位!!"); return false; } else { trip("password_trip", "OK!!"); } //获取确认密码框的值 var var surePassword = document.getElementById("surePassword"); var surePass = surePassword.value; if (userPass != surePass) { trip("surePassword_trip", "两次密码不一致!!"); return false; } //校验邮箱:/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/ var inputEmail = document.getElementById("email"); var uEmail = inputEmail.value; if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)) { trip("emil_trip", "邮箱不合法!!"); return false; } else { trip("emil_trip", "OK!!"); } } function submitT() { if (checkForm()) { return true; } else { return false; } } 代码中所用背景图：
登录注册效果图：
下载链接：https://download.csdn.net/download/weixin_49861340/85031482 |
【本文地址】
公司简介
联系我们