【JavaScript小項目】用戶註冊校驗
- 2020 年 2 月 13 日
- 筆記
思路分析
- 校驗欄位：
- 手機號
- 密碼
- 用戶名
- 性別
- 出生日期
- 驗證碼
- 校驗手段：
- 正則表達式判斷
- 長度判斷
程式碼實現
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>註冊頁面校驗</title> </head> <script> var flag = true; // 校驗手機號 function checkNum() { // 獲取用戶輸入的內容 var num = document.getElementById("username").value; // 定義正則表達式 var reg = new RegExp("^1[3456789]\d{9}$"); // 校驗手機號 var result = reg.test(num); if(result) { document.getElementById("username_msg").innerHTML = ""; } else { document.getElementById("username_msg").innerHTML = "您輸入的手機號有誤,請檢查"; flag = false; } } // 校驗密碼 function checkPsw() { var password = document.getElementById("password").value if(password.length >= 6) { document.getElementById("password_msg").innerHTML = ""; } else { document.getElementById("password_msg").innerHTML = "密碼長度至少為6位"; flag = false; } } // 校驗重複密碼 function checkrePsw() { var password = document.getElementById("repassword").value if(password.length >= 6) { document.getElementById("repassword_msg").innerHTML = ""; } else { document.getElementById("repassword_msg").innerHTML = "密碼長度至少為6位"; // 如果密碼長度校驗失敗,後續的邏輯就不需要再執行了 flag = false; return; } // 比對兩次密碼 var psw = document.getElementById("password").value if(psw == password) { document.getElementById("repassword_msg").innerHTML = ""; } else { document.getElementById("repassword_msg").innerHTML = "兩次密碼不一致,請檢查"; flag = false; } } function checkEmail() { // 1111 @ qq .com .cn // 英文字元數字-_,至少是1位 // .英文字元數字-_,至少是1位 // ([.][a-zA-Z0-9-_]+)+ // 獲取用戶輸入的內容 var email = document.getElementById("email").value; // 定義正則表達式 var reg = new RegExp("^[a-zA-Z0-9-_]+@[a-zA-Z0-9-_]+([.][a-zA-Z0-9-_]+)+$"); // 校驗手機號 var result = reg.test(email); if(result) { document.getElementById("email_msg").innerHTML = ""; } else { document.getElementById("email_msg").innerHTML = "您輸入的郵箱有誤,請檢查"; flag = false; } } function checkUserName() { var usr = document.getElementById("name").value; if(usr.length >= 5) { document.getElementById("name_msg").innerHTML = ""; } else { document.getElementById("name_msg").innerHTML = "用戶名長度至少5位"; flag = false; } } function checkCode() { var usr = document.getElementById("checkcode").value; if(usr.length >= 4) { document.getElementById("checkcode_msg").innerHTML = ""; } else { document.getElementById("checkcode_msg").innerHTML = "驗證碼錯誤"; flag = false; } } function checkForm() { flag = true; checkNum(); checkPsw(); checkrePsw(); checkEmail(); checkUserName(); checkCode(); return flag; } </script> <body> <form onsubmit="return checkForm()"> <table width="60%" height="90%" align="center" bgcolor="#FF88FF"> <tr> <td colspan="3">會員註冊 USER REGISTER</td> </tr> <tr> <td width="20%">手機號:</td> <td width="40%"><input type="text" name="username" id="username" onblur="checkNum()"></td> <td width="40%"><span id="username_msg"></span></td> </tr> <tr> <td>密碼:</td> <td><input type="password" name="password" id="password" onblur="checkPsw()"></td> <td><span id="password_msg"></span></td> </tr> <tr> <td>確認密碼:</td> <td><input type="password" name="repassword" id="repassword" onblur="checkrePsw()"></td> <td><span id="repassword_msg"></span></td> </tr> <tr> <td>Email:</td> <td><input type="text" name="email" id="email" onblur="checkEmail()"></td> <td><span id="email_msg"></span></td> </tr> <tr> <td>用戶名:</td> <td><input type="text" name="name" id="name" onblur="checkUserName()"></td> <td><span id="name_msg"></span></td> </tr> <tr> <td>性別:</td> <td> <input type="radio" name="sex" value="男" checked="checked"> 男 <input type="radio" name="sex" value="女" />女 </td> </tr> <tr> <td>出生日期</td> <td> <input type="date" name="birthday" id="birthday"> </td> <td><span id="birthday_msg"></span></td> </tr> <tr> <td>驗證碼</td> <td> <input type="text" name="checkcode" id="checkcode" onblur="checkCode()"> </td> <td><span id="checkcode_msg"></span></td> </tr> <tr> <td colspan="2"> <input type="submit" value="註冊" /> </td> </tr> </table> </form> </body> </html> 效果展示
參考
- 黑馬程式設計師 120天全棧區塊鏈開發 開源教程 https://github.com/itheima1/BlockChain
一番霧語：JavaScript小項目。
