實現驗證使用者註冊介面案例
阿新 • • 發佈：2021-08-14
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>驗證使用者註冊</title> <meta charset="utf-8" /> <style> #mailbox,#user,#password,#repetition,#phone { width: 250px; } img { height: 10px; } a { color: black; } #register { width: 150px; height: 45px; background-color: sandybrown; border-radius: 10px; } </style> </head> <body> <form> *Email： <input type="text" value="" placeholder="請輸入您的Email地址" name="" id="mailbox" /> <img id="picture" /> <span id="site"></span> <br /> <br /> *使用者名稱： <input type="text" value="" name="" placeholder="請輸入你的使用者名稱" id="user" /> <img id="pictureTwo" /> <span id="import"></span> <br /> <br /> *密碼： <input type="password" value="" name="" placeholder="請輸入密碼" id="password" /> <img id="pictureThree" /> <span id="cipher"></span> <br /> <br /> *確認密碼： <input type="password" value="" name="" placeholder="請輸入您的重複密碼" id="repetition" /> <img id="pictureFour" /> <span id="repetitive"></span> <br /><br /> *線上聯絡： <input type="text" value="" name="" placeholder="請輸入您的電話號碼" id="phone" /><a href="#">沒有旺旺？註冊</a><a href="#">下載阿里旺旺</a> <img id="pictureFive" /> <span id="number"></span> <br /><br /> <input type="checkbox" name="read" id="read" value="" />我已閱讀會員權益和義務 <br /><br /> <input type="button" value="注 冊" name="" id="register" onclick="login()" /> </form> <script> //packaging封裝函式 function packaging(id) { return document.getElementById(id); } var mailboxpang = null; var userpang = null; var passwordname = null; var repetitionname = null; var phonename = null; var readpang = null; var mailbox = packaging("mailbox"); var user=packaging("user") var password = packaging("password"); var repetition=packaging("repetition") var phone=packaging("phone") mailbox.onblur = function () { //Email地址 var sum = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/; console.log("2"); if (sum.test(packaging("mailbox").value)) { packaging("picture").src = "img/√.jpg"; packaging("site").innerHTML = "合法"; mailboxpang = true; } else if (packaging("mailbox").value == "") { packaging("picture").src = "img/感嘆號.PNG"; packaging("site").innerHTML = "請輸入您的Email地址"; mailboxpang = false; } else { packaging("picture").src = "img/感嘆號.PNG"; packaging("site").innerHTML = "輸入錯誤，至少3位數,最多7位數"; mailboxpang = false; } } user.onblur = function () { //使用者名稱 var sum = /^[a-zA-Z].{5,8}$/; if (sum.test(packaging("user").value)) { packaging("pictureTwo").src = "img/√.jpg"; packaging("import").innerHTML = "合法"; userpang = true; } else if (packaging("user").value == "") { packaging("pictureTwo").src = "img/感嘆號.PNG"; packaging("import").innerHTML = "使用者名稱不能為空"; userpang = false; } else { packaging("pictureTwo").src = "img/感嘆號.PNG"; packaging("import").innerHTML = "須以字母開頭，至少6位，建議使用Email"; userpang = false; } } password.onblur = function () { //密碼 var sum = /^\w{3,6}$/; if (sum.test(packaging("password").value)) { packaging("pictureThree").src = "img/√.jpg"; packaging("cipher").innerHTML = "合法"; passwordname = true; } else if (packaging("password").value == "") { packaging("pictureThree").src = "img/感嘆號.PNG"; packaging("cipher").innerHTML = "密碼不能為空"; passwordname = false; } else { packaging("pictureThree").src = "img/感嘆號.PNG"; packaging("cipher").innerHTML = "密碼設定至少3位數，最多7位數"; passwordname = false; } } repetition.onblur = function (){//確認密碼 if(packaging("repetition").value == ""){ packaging("pictureFour").src = "img/感嘆號.PNG"; packaging("repetitive").innerHTML = "密碼不能為空"; repetitionname = false; } else if(this.value===password.value){ packaging("pictureFour").src = "img/√.jpg"; packaging("repetitive").innerHTML = "合法"; repetitionname=true; } else{ packaging("pictureFour").src = "img/感嘆號.PNG"; packaging("repetitive").innerHTML = "兩次密碼不一致，請重新輸入"; repetitionname = false; } } phone.onblur = function () { //輸入聯絡方式 var sum =/^\d{11}$/; if (sum.test(packaging("phone").value)) { packaging("pictureFive").src = "img/√.jpg"; packaging("number").innerHTML = "合法"; phonename = true; } else if (packaging("phone").value == "") { packaging("pictureFive").src = "img/感嘆號.PNG"; packaging("number").innerHTML = "請輸入旺旺ID，方便企業使用者線上聯絡你"; phonename = false; } else { packaging("pictureFive").src = "img/感嘆號.PNG"; packaging("number").innerHTML = "輸入錯誤，不能為字母數字下劃線開頭且長度為11位數字"; phonename = false; } } </script> </body> </html> //根據內容可適當修改 //可參考網站：https://www.cnblogs.com/Renyi-Fan/p/12026277.html