<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>注册</title> <link rel="stylesheet" href="./css/reset.css"> <link rel="stylesheet" href="./css/register.css"> </head> <body> <body> <!--导航 --> <header> <div> <a href="index.html"> <img src="./image/zhuce-img/maoyan.small.png" alt="" /> </a> </div> </header> <!-- 导航下面--> <div class="dhxia"> <!--中间 --> <form action="/addphone" method="post"> <ul> <li> <label for="phone">手机号</label> <input id="phone" name="phone" type="text" maxlength="11" required/> <span>注册成功后，全美团通用</span> <span></span> <p> <input type="button" id="getCode" value="免费获取短信验证码"> <span></span> </p> </li> <li> <label for="code">短信动态码</label> <input type="text" name="code" id="code" maxlength="6" required/> <span></span> <span></span> </li> <li> <label for="pwd">创建密码</label> <input type="password" name="pwd" id="pwd" required/> <p id="colorCode"> <span>弱</span> <span>中</span> <span>强</span> </p> </li> <li> <label for="sure_password">确认密码</label> <input type="password" name="sure_password" id="sure_password" required/> <span></span> <span></span> </li> <li> <button>同意以下协议并注册</button> <p> <a href="#">《美团网用户协议》</a> </p> </li> </ul> </form> </div> <!-- 脚注--> <footer> <div> <span>©meituan.com</span> <span>京ICP070791号</span> <span>京公网安备11010502025545</span> </div> </footer> <script src="./js/jquery-1.11.2-min.js"></script> <script src="./js/register.js"></script> </body> </body> </html>
function init() { // 状态 let objStatus = { phone: true, code: true, sure_password: true, } // 正则验证手机 $("#phone").on("change", surePhone); //发送验证码 $("#getCode").on("click", getCode) // 验证码输入正确 $("#code").on("change", sureCode); // 密码 $("#pwd").on("input", pwdFunc); // 确认密码 $("#sure_password").on("change", surePwd) // 正则验证手机 function surePhone() { let phone = $("#phone").val(); let reg = /^1[3,4,5,8]\d{9}$/; if (reg.test(phone)) { $("#phone").next().css("color", "white"); $("#phone").next().html("√"); $("#phone").next().attr("class", "right"); $("#phone").next().next().html(""); $.get("/getPhone", { phone: phone }, function (data) { phoneIsreapeat(data); }) } else { objStatus[phone] = false; $("#phone").next().html("—"); $("#phone").next().css("color", "white"); $("#phone").next().next().html("请输入正确的11位电话号码"); $("#phone").next().next().css("color", "orange"); $("#phone").next().attr("class", "wrong"); } } // 手机号重复 function phoneIsreapeat(data) { if (data == "repeat") { objStatus[phone] = false; $("#phone").next().css("color", "white"); $("#phone").next().html("—"); $("#phone").next().next().html("手机号重复"); $("#phone").next().next().css("color", "orange"); $("#phone").next().attr("class", "wrong"); } else { objStatus[phone] = true; } } // 发送验证码 function getCode() { $.get("/getCode", function (data) { $("#getCode").next().html(data); $("#getCode").next().attr("class", "showCode"); }) } // 验证码输入正确 function sureCode() { if ($("#code").val() == $("#getCode").next().html()) { $("#code").next().css("color", "white"); $("#code").next().html("√"); $("#code").next().attr("class", "right"); $("#code").next().next().html(""); objStatus[code] = true; } else { $("#code").next().html("—"); $("#code").next().css("color", "white"); $("#code").next().next().html("验证码不正确"); $("#code").next().next().css("font-size", "14px"); $("#code").next().next().css("color", "orange"); $("#code").next().attr("class", "wrong"); objStatus[phone] = false; } } // 密码 function pwdFunc() { let password = $("#pwd").val(); let reg = /^(?!\d+$)(?![a-zA-Z]+$)[a-zA-Z\d]+$|^(?![a-zA-Z]+$)(?![@#$%^&]+$)[a-zA-Z@#$%^&]+$|^(?!\d+)(?![@#$%^&]+$)[\d@#$%^&]+$/; let regNumOrCode = /^[a-zA-Z]+$|^[0-9]+$|^[@%!#^*()-+&',;=?$]+$/; let regNumAndCode = /^(?!\d+$)(?![a-zA-Z]+$)(?![@#$%^&]+$)[\da-zA-Z@#$%^&]+$/; if (password.match(regNumOrCode)) { $("#colorCode span:first-of-type").css({ backgroundColor: '#f17a7e', }) $("#colorCode span:not(:first-of-type)").css({ backgroundColor: '#eeeeee', }) } else if (password.match(reg)) { $("#colorCode span:not(:last-child)").css({ backgroundColor: 'orange', }) $("#colorCode span:last-child").css({ backgroundColor: '#eeeeee', }) } else if (password.match(regNumAndCode)) { $("#colorCode span").css({ backgroundColor: 'rgb(72, 211, 72)', }) } else { $("#colorCode span").css({ backgroundColor: '#eeeeee', }) } } // 确认密码 function surePwd() { if ($("#sure_password").val() == $("#pwd").val()) { $("#sure_password").next().css("color", "white"); $("#sure_password").next().html("√"); $("#sure_password").next().attr("class", "right"); $("#sure_password").next().next().html(""); objStatus[sure_password] = true; } else { $("#sure_password").next().html("—"); $("#sure_password").next().css("color", "white"); $("#sure_password").next().next().html("密码不匹配"); $("#sure_password").next().next().css("font-size", "14px"); $("#sure_password").next().next().css("color", "orange"); $("#sure_password").next().attr("class", "wrong"); objStatus[sure_password] = true; } } // 提交 $("form").on("submit", toLogin) function toLogin() { for (const key in objStatus) { if (objStatus[key] == false) { return false; } } return true; } } init();
css
li{ list-style: none; } body{ width:100%; } header{ line-height: 60px; width:100%; height: 60px; background-color: #ffffff; border-bottom: 2px solid #e02227; } a{ text-decoration: none; } a:hover{ text-decoration: none; } header div{ margin-left: 26%; } .dhxia{ width:52%; margin: 40px auto; } /*中间*/ form { width:100%; margin-top: 40px; margin-bottom: 40px; } label{ display: inline-block; width: 80px; text-align: right; font-size: 16px; } /* 动态验证码按钮 */ #getCode{ width:120px; font-size:12px; color: rgb(90, 85, 85); border: 1px solid rgb(211, 205, 205); border-radius: 5px; } .showCode{ text-align: center; margin-left: 5px; display: inline-block; width:60px; border: 1px solid rgb(211, 205, 205); } /* 对钩 */ .right{ display: inline-block; text-align: center; width: 20px; height: 20px; line-height: 20px; background-color: rgb(72, 211, 72); border: 1px solid transparent; border-radius: 50%; } /* 横杠 */ .wrong{ text-align: center; display: inline-block; width:20px; height: 20px; line-height: 20px; background-color: orange; border: 1px solid transparent; border-radius: 50%; } input{ width: 180px; font-size: 14px; padding-top: 5px; padding-left: 5px; padding-bottom: 5px; } li{ margin-bottom: 10px; } li:first-child span{ font-size: 14px; color: #9a9a9a; } li:first-child p{ margin-left: 84px; margin-top: 10px; } li:first-child button{ font-size: 14px; } li:last-child{ margin-left: 84px; } li:last-child p{ margin-top: 10px; } li:nth-child(3) p{ margin-left: 84px; margin-top: 10px; width: 190px; display: flex; justify-content: space-around; } li:nth-child(3) p span{ text-align: center; width:31%; background-color: #eeeeee; color: #ffffff; } li:last-child input{ width: 190px; background-color: #e93d42; color: #ffffff; font-size: 16px; border: 1px solid transparent; border-radius: 4px; } li:last-child p a{ font-size: 14px; color: #ec464b; width: 150px; text-align: left; } /*脚注*/ footer { width:100%; padding-top: 30px; border-top: 1px solid #eeeeee; margin-bottom: 10%; } footer>div{ width:48%; margin: 0 auto; text-align: right; } footer>span{ font-size: 14px; color: #9a9a9a; }