css+js模擬使用者 註冊和登入頁面
阿新 • • 發佈：2018-11-27
製作一個註冊頁面使用者名稱不能為空並且（6-20位英文字母數字下劃線）
密碼 重複密碼 6位以上英文字母數字下劃線 密碼和重複密碼必須一致
身份證號：舊身份證號為15位數字
新身份證號為18位數字， 或17位數字，最末位為x或X
email正常的郵箱規則
使用者註冊：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TzhangRong</title> <script> function vali() { var pws1 = document.getElementById("name"); var as = pws1.value; var pws2 = new RegExp(/^\w{6,20}$/); if (pws1 != null && pws2.test(as)) { alert("名字格式正確"); } else { alert("名字格式錯誤"); } var pass = document.getElementById("pwd"); var reg = new RegExp(/^[a-zA-Z0-9_-]{6,16}$/); var reg1 = pass.value; if (reg.test(reg1)) { alert("密碼正確"); } else{ alert("密碼錯誤"); return false; } var passAB=document.getElementById("pwd1"); var reg2=new RegExp(/^[a-zA-Z0-9_-]{6,16}$/); var reg3=passAB.value; if (reg1==reg3){ alert("密碼驗證成功"); }else{ alert("兩次密碼不一樣"); } var email=document.getElementById("email1"); var reg=new RegExp(/^[A-Za-z0-9\u4e00-\u9fa5][email protected][a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/); var em=email.value; if(reg.test(em)){ alert("郵箱正確"); }else{ alert("郵箱錯誤"); } var id6=document.getElementById("zid"); var reg=new RegExp(/^\d{15}$|^(\d{18}|\d{17}[xX])$/); var email2=id6.value; if(reg.test(email2)){ alert("id正確"); }else{ alert("id錯誤"); } alert("恭喜您註冊成功"); } function open_win() { window.open("登入介面.html") } </script> <style> #table-a{ width: 400px; height: 420px; border: #ffd6d5 solid; background-color: #ffe3e3; position: relative; left: 500px; top: 70px; } #box{ position: absolute; left: 90px; top: 100px; /*border: yellow solid;*/ font-size: 20px; } #tit{ position: absolute; left: 120px; top: 20px; } body{ background-image: url("timg.jpg"); background-size:100% ; width:1024px ; height:700px; } </style> </head> <body> <div id="table-a"> <form id="from1" onsubmit="return vali()" method="get"> <div id="tit"><h2>使用者註冊</h2></div> <div id="box"> 使用者名稱：<input type="text" id="name"><br> 密碼：<input type="password" id="pwd"><br> 確認密碼：<input type="password" id="pwd1"><br> 郵箱：<input type="text" id="email1"><br> 身份證號：<input type="text" id="zid"><br> 愛好：<input name="hobby" type="checkbox"value="1">吃吃 <input value="2"type="checkbox" name="hobby">喝喝<br> <input type=button value="登入" onclick="open_win()" /> <input type="submit"/><br> </div> </div> </tr> </form> </div> </body> </html>
登入介面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ /*background-image: url("u=1782042621,287065208&fm=26&gp=0.jpg");*/ background-color: #ffd6d5; background-size:100% ; width:1024px ; height:700px; } #box{ width: 400px; height: 450px; border: #fceaff solid; background-color: #fff6f6; position: relative; left: 500px; top: 50px; } .d2{ position: absolute; left: 90px; top: 120px; /*border: yellow solid;*/ font-size: 20px; } #d1{ top: 60px; position: absolute; left: 160px; /*border:rebeccapurple solid;*/ } #ti{ position: absolute; left: 120px; top: 80px; } #t{ position: absolute; left: 10px; top: 115px; } </style> <script> function de() { var n=document.getElementById("name1"); var name1=n.value; var reg=new RegExp(/^\w{6,20}$/); if (n!=null&®.test(name1)){ alert("姓名正確"); }else { alert("重新輸入"); } var n=document.getElementById("pwd"); var pass=n.value; var reg1=new RegExp(/^[a-zA-Z0-9_-]{6,16}$/); if (n!=null&®1.test(pass)){ alert("密碼正確"); }else { alert("密碼錯誤"); } if(name1==reg&®1==pass){ alert("登陸成功"); } } </script> </head> <body> <div id="box"> <form id="table_1" onsubmit="return de()"> <div id="d1"> <h2 id="font1">歡迎登陸</h2></div> <div class="d2"> <h5>姓名：<input type="text" width="500" height="30" id="name1"></h5> <h5>密碼：<input type="text"width="50" height="30" id="pwd"></h5> <div id="ti"> <h2><input type="submit" value="登入" height="80" width="80"/></h2> </div> <div id="t"> <input type=button value="Open Window" onclick="open_win()" /> </div> </div> </form> </div> </body> </html>
註冊實現圖：
登入實現：
