JS註冊頁面，帶提示資訊
阿新 • • 發佈：2019-02-02
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用者註冊</title> <style type="text/css"> span{ color: red; } </style> <script type="text/javascript"> /* 賬號：6~10位字母、數字、下劃線，第一個字元必須是字母 /^[a-zA-Z][\w]{5,9}$/ 密碼：6~10位數字 /^[\d]{6,10}$/ * */ //驗證使用者名稱 function checkUsername(id, infoId){ var reg = /^[a-zA-Z][\w]{5,9}$/; var txtUsername= document.getElementById(id).value; if(!reg.test(txtUsername)){ setInfo(infoId,'使用者名稱必須為6-10位字母數字，第一位是字母'); return false; } return true; } //設定提示資訊 function setInfo(id, info){ document.getElementById(id).innerText=info; } //驗證密碼 function checkPassword(id, infoId) { var reg = /^[\d]{6,10}$/; var txtPassword = document.getElementById(id).value; if(!reg.test(txtPassword)) { setInfo(infoId,'密碼必須為6~10位數字'); return false; } return true; } //重複密碼 function checkPasswordAgain(pwd1, pwd2, infoId){ var txtPwd1 = document.getElementById(pwd1).value; var txtPwd2 = document.getElementById(pwd2).value; if(txtPwd1!= txtPwd2){ setInfo(infoId, "與密碼完全一致"); return false; } var reg = /^[0-9]{6,10}$/; if(!reg.test(txtPwd2)) { setInfo(infoId,'密碼必須為6~10位數字'); return false; } return true; } //電子郵箱 function checkEmail(id, infoId) { var reg = /^[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?$/; var txtEmail = document.getElementById(id).value; if(!reg.test(txtEmail)) { setInfo(infoId, '請輸入正確郵箱地址'); return false; } return true; } //電話號碼 function checkTel(id, infoId) { var reg = /^[1][0-9]{10}$/; var txtTel = document.getElementById(id).value; if(!reg.test(txtTel)) { setInfo(infoId,'請輸入正確手機號'); return false; } return true; } //QQ function checkQq(id, infoId) { var reg = /^[1-9][0-9]{4,}$/; var txtQq = document.getElementById(id).value; if(!reg.test(txtQq)) { setInfo(infoId, '請輸入正確QQ號'); return false; } return true; } //清除資訊 function clearInfo(id) { document.getElementById(id).innerText=" "; } //校驗所有表單元素的內容 function checkAll() { if(checkUsername('username','usernameInfo')&checkPassword('pass', 'passwordInfo')&checkPasswordAgain('pass', 'passwordAgain', 'passwordAgainInfo')&checkEmail('email', 'emailInfo')&checkTel('tel', 'telInfo')&checkQq('qq', 'qqInfo')) { return true; } return false; } </script> </head> <body> <form action="http://www.baidu.com" method="post" onsubmit="return checkAll();"> <table> <tr> <td> <label>賬號</label> </td> <td> <input type="text" id="username" placeholder="請輸入賬號" autofocus="autofocus" onblur="checkUsername('username', 'usernameInfo')" onfocus="clearInfo('usernameInfo')"/> </td> <td> <span id="usernameInfo"></span> </td> </tr> <tr> <td> <label>密碼</label> </td> <td> <input type="password" id="pass" placeholder="請輸入密碼" onblur="checkPassword('pass', 'passwordInfo')" onfocus="clearInfo('passwordInfo')" /> </td> <td> <span id="passwordInfo"></span> </td> </tr> <tr> <td> <label>重複密碼</label> </td> <td> <input type="password" id="passwordAgain" placeholder="請再次輸入密碼" onblur="checkPasswordAgain('pass', 'passwordAgain', 'passwordAgainInfo')" onfocus="clearInfo('passwordAgainInfo')" /> </td> <td> <span id="passwordAgainInfo"></span> </td> </tr> <tr> <td> <label>郵箱</label> </td> <td> <input type="text" id="email" placeholder="請輸入電子郵箱" onblur="checkEmail('email', 'emailInfo')" onfocus="clearInfo('emailInfo')" /> </td> <td> <span id="emailInfo"></span> </td> </tr> <tr> <td> <label>手機號</label> </td> <td> <input type="text" id="tel" placeholder="請輸入手機號" onblur="checkTel('tel', 'telInfo')" onfocus="clearInfo('telInfo')" /> </td> <td> <span id="telInfo"></span> </td> </tr> <tr> <td> <label>QQ</label> </td> <td> <input type="text" id="qq" placeholder="請輸入QQ" onblur="checkQq('qq', 'qqInfo')" onfocus="clearInfo('qqInfo')" /> </td> <td> <span id="qqInfo"></span> </td> </tr> <tr> <td colspan="6"> <button type="submit">註冊</button> </td> </tr> </table> </form> </body> </html>