JQuery註冊頁面，帶提示資訊
阿新 • • 發佈：2019-02-09
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>註冊</title> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"> </script> <script type="text/javascript"> $(function() { //使用者名稱 $("#username").blur(function() { //對使用者名稱進行驗證 checkUsername("#username", "#usernameInfo"); }).focus(function() { clearInfo("#usernameInfo"); }); //驗證 function checkUsername(id, info) { var reg = /^[a-zA-Z][\w]{5,9}$/; var $username = $(id).val(); if(!reg.test($username)) { setInfo(info, "使用者名稱開頭為字母，6到10位字母或數字"); return false; } return true; } //密碼 $("#pass").blur(function() { //對密碼進行驗證 checkPassword("#pass", "#passInfo"); }).focus(function() { clearInfo("#passInfo"); }); //驗證 function checkPassword(id, info) { var reg = /^[\d]{6,10}$/ var $pass = $(id).val(); if(!reg.test($pass)) { setInfo(info, "密碼必須為6到10位數字"); return false; } return true; } //重複密碼 $("#passwordAgain").blur(function() { //對重複密碼進行驗證 checkPasswordAgain("#pass", "#passwordAgain", "#passwordAgainInfo"); }).focus(function() { clearInfo("#passwordAgainInfo"); }); //驗證 function checkPasswordAgain(pwd1, pwd2, info) { var $pwd1 = $(pwd1).val(); var $pwd2 = $(pwd2).val(); if($pwd1 != $pwd2) { setInfo(info, "重複密碼與原密碼不一致"); return false; } var reg = /^[\d]{6,10}$/; if(!reg.test($pwd2)) { setInfo(info, "重複密碼必須為6到10位數字"); return false; } return true; } //郵箱 $("#email").blur(function() { //對郵箱進行驗證 checkEmail("#email", "#emailInfo"); }).focus(function() { clearInfo("#emailInfo"); }); //驗證 function checkEmail(id, info) { var reg = /^[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?$/; var $email = $(id).val(); if(!reg.test($email)) { setInfo(info, "郵箱格式不正確"); return false; } return true; } //手機號 $("#tel").blur(function() { //對手機號進行驗證 checkTel("#tel", "#telInfo"); }).focus(function() { clearInfo("#telInfo"); }); //驗證 function checkTel(id, info) { var reg = /^[1][0-9]{10}$/; var $tel = $(id).val(); if(!reg.test($tel)) { setInfo(info, "手機號格式不正確"); return false; } return true; } //QQ $("#qq").blur(function() { //對QQ號進行驗證 checkQq("#qq", "#qqInfo"); }).focus(function() { clearInfo("#qqInfo"); }); //驗證 function checkQq(id, info) { var reg = /^[1-9][0-9]{4,}$/; var $qq = $(id).val(); if(!reg.test($qq)) { setInfo(info, "QQ號格式不正確"); return false; } return true; } //設定錯誤資訊 function setInfo(id, info) { $(id).text(info); } //清空錯誤資訊 function clearInfo(id) { $(id).text(""); } //校驗所有表單元素的內容 $("#form1").submit(function() { return checkAll(); }); function checkAll() { // alert("222"); if(checkUsername('#username', '#usernameInfo') & checkPassword('#pass', '#passInfo') & 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" id="form1"> <table> <tr> <td> <label>賬號</label> </td> <td> <input type="text" id="username" placeholder="請輸入賬號" autofocus="autofocus" /> </td> <td> <span id="usernameInfo"></span> </td> </tr> <tr> <td> <label>密碼</label> </td> <td> <input type="password" id="pass" placeholder="請輸入密碼" /> </td> <td> <span id="passInfo"></span> </td> </tr> <tr> <td> <label>重複密碼</label> </td> <td> <input type="password" id="passwordAgain" placeholder="請再次輸入密碼" /> </td> <td> <span id="passwordAgainInfo"></span> </td> </tr> <tr> <td> <label>郵箱</label> </td> <td> <input type="text" id="email" placeholder="請輸入電子郵箱" /> </td> <td> <span id="emailInfo"></span> </td> </tr> <tr> <td> <label>手機號</label> </td> <td> <input type="text" id="tel" placeholder="請輸入手機號" /> </td> <td> <span id="telInfo"></span> </td> </tr> <tr> <td> <label>QQ</label> </td> <td> <input type="text" id="qq" placeholder="請輸入QQ" /> </td> <td> <span id="qqInfo"></span> </td> </tr> <tr> <td colspan="6"> <button type="submit">註冊</button> </td> </tr> </table> </form> </body> </html>