【需求徵集系統】打卡（三）
阿新 • • 發佈：2020-10-22
更新註冊介面。程式碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>主頁</title> 6 <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles."> 7 <meta name="author" content="Vincent Garreau"/> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 9 <script type="text/javascript" src="js/jquery.js"></script> 10 <script type="text/javascript" src="js/cookie.js"></script> 11 <scripttype="text/javascript" src="js/selfjs.js"></script> 12 <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/> 13 <style type="text/css"> 14 .demo-bg{ 15 width: 1520px; 16 height: 1000px; 17 position: relative; 18 background-image: url(img/LRBackground.jpg); 19 background-position: 50% 50%; 20 background-size: cover; 21 background-repeat: no-repeat; 22 margin-left: auto; 23 margin-right: auto; 24 } 25 .write{ 26 position:absolute; 27 margin-left:350px; 28 left:0; 29 right:0; 30 top:0; 31 bottom:0; 32 width:820px; 33 height:1000px; 34 line-height:50px; 35 background:#ffffffd2; 36 } 37 .center{ 38 text-align:center; 39 } 40 </style> 41 </head> 42 <body> 43 <div class="demo-bg"> 44 <div class="write"> 45 <h1>使用者註冊</h1> 46 <h3>帶*號為必填項</h3> 47 <form class="layui-form"> 48 <table class="layui-table"lay-skin="row"lay-even=""> 49 <tr> 50 <td class="center">*使用者名稱:</td> 51 <td> 52 <input type="text" name="username" lay-verify="required"> 53 <span id="usertip" style="margin-left:100px;">使用者名稱大於6位且小於20位</span> 54 </td> 55 </tr> 56 <tr> 57 <td class="center">*密碼:</td> 58 <td> 59 <input type="password" name="pwd" lay-verify="required"> 60 <span id="pwdtip" style="margin-left:100px;">密碼長度應大於等於6位</span> 61 </td> 62 </tr> 63 <tr> 64 <td class="center">*驗證密碼:</td> 65 <td> 66 <input type="password" name="cpwd" lay-verify="required"> 67 <span id="cpwdtip" style="margin-left:100px;"></span> 68 </td> 69 </tr> 70 <tr> 71 <td class="center">*真實姓名:</td> 72 <td> 73 <input type="text" name="name"lay-verify="required"> 74 <span id="nametip" style="margin-left:100px;">請填寫真實姓名，以便與您取得聯絡</span> 75 </td> 76 </tr> 77 <tr> 78 <td class="center">*身份證號:</td> 79 <td> 80 <input type="text" name="idcard"lay-verify="required"> 81 </td> 82 </tr> 83 <tr> 84 <td class="center">性別:</td> 85 <td> 86 <input type="radio" name="sex" value="男" title="男" checked="checked"> 87 <input type="radio" name="sex" value="女" title="女"> 88 </td> 89 </tr> 90 <tr> 91 <td class="center">*國家/省市:</td> 92 <td> 93 <div class="layui-form-item"> 94 <div class="layui-inline"> 95 <select name="province" class="province" lay-verify="required" lay-search lay-filter="province"> 96 <option value="">省份</option> 97 </select> 98 </div> 99 <div class="layui-inline"> 100 <select name="city" class="city" lay-verify="required" lay-search lay-filter="city"> 101 <option value="">地級市</option> 102 </select> 103 </div> 104 </div> 105 </td> 106 </tr> 107 <tr> 108 <td class="center">*機構全稱:</td> 109 <td><input type="text" name="workplace" lay-verify="required"></td> 110 </tr> 111 <tr> 112 <td class="center">*專業方向:</td> 113 <td><input type="text" name="major" lay-verify="required"></td> 114 </tr> 115 <tr> 116 <td class="center">*所在行業:</td> 117 <td><input type="text" name="work" lay-verify="required"></td> 118 </tr> 119 <tr> 120 <td class="center">教育程度:</td> 121 <td><input type="text" name="education"></td> 122 </tr> 123 <tr> 124 <td class="center">職稱:</td> 125 <td><input type="text" name="workrank"></td> 126 </tr> 127 <tr> 128 <td class="center">通訊地址:</td> 129 <td> 130 <input type="text" name="postalAddr"> 131 <span id="Addrtip" style="margin-left:100px;">請您填寫詳細，以便與您取得聯絡</span> 132 </td> 133 </tr> 134 <tr> 135 <td class="center">郵政編碼:</td> 136 <td><input type="text" name="postalCode" lay-verify="required|number"></td> 137 </tr> 138 <tr> 139 <td class="center">手機:</td> 140 <td><input type="text" name="mobilephone" lay-verify="required|phone"></td> 141 </tr> 142 <tr> 143 <td class="center">固定電話:</td> 144 <td><input type="text" name="phone"></td> 145 </tr> 146 <tr> 147 <td class="center">郵箱:</td> 148 <td><input type="text" name="mail" lay-verify="required|email"></td> 149 </tr> 150 <tr> 151 <td class="center">QQ:</td> 152 <td><input type="text" name="QQ"></td> 153 </tr> 154 <tr> 155 <td class="center">MSN:</td> 156 <td><input type="text" name="MSN"></td> 157 </tr> 158 <tr> 159 <td class="center">驗證碼:<img alt="驗證碼" src="OrganServlet?method=Code"></td> 160 <td><input type="text" name="checkcode"></td> 161 </tr> 162 <tr> 163 <td colspan="2" class="center"><button lay-filter="go"id="btn"lay-submit=""class="layui-btn">註冊</button> 164 <button type="reset"name="re"class="layui-btn">重置</button></td> 165 </tr> 166 </table> 167 </form> 168 </div> 169 </div> 170 </body> 171 <script src="layui/layui.all.js"></script> 172 <script type="text/javascript" src="js/area.js"></script> 173 <script type="text/javascript" src="js/selectMore.js"></script> 174 <script> 175 $(function(){ 176 $('input[name=username]').keyup(function(){ 177 username=$(this).val(); 178 if(!/^\w{6,20}/.test(username)){ 179 $('#usertip').text("使用者名稱應該由6-20位字母、數字或下劃線組成").css('color','red'); 180 $('#btn').attr('disabled','disabled') 181 }else{ 182 $.post( 183 'OrganServlet' 184 ,{'username':username,'method':'checkname'} 185 ,function(o){ 186 o=JSON.parse(o); 187 if(o.status==1){ 188 $('#usertip').text("該使用者名稱已存在").css('color','red'); 189 $('#btn').attr('disabled','disabled') 190 }else{ 191 $('#usertip').text(''); 192 $('#btn').attr('disabled',false) 193 } 194 } 195 ) 196 197 } 198 }) 199 200 $('input[name=pwd]').keyup(function(){ 201 pwd=$(this).val(); 202 if(!/^\w{6,20}/.test(pwd)){ 203 $('#pwdtip').text('密碼應由6-20位字母、數字或下劃線組成').css('color','red') 204 $('#btn').attr('disabled','disabled') 205 }else{ 206 $('#pwdtip').text(''); 207 $('#btn').attr('disabled',false) 208 } 209 }) 210 $('input[name=cpwd]').keyup(function(){ 211 cpwd=$(this).val(); 212 pwd=$('input[name=pwd]').val(); 213 if(pwd!==cpwd){ 214 $('#cpwdtip').text('兩次密碼不一致').css('color','red') 215 $('#btn').attr('disabled',true) 216 }else{ 217 $('#cpwdtip').text(''); 218 $('#btn').attr('disabled',false) 219 } 220 }) 221 222 }) 223 224 var form=layui.form; 225 226 form.on('submit(go)',function (d) { //表單提交，進行註冊 227 $.post( 228 'OrganServlet?method=register', 229 $('.layui-form').serialize(), 230 function (o) { 231 o=JSON.parse(o); 232 if(o.status==-1){ 233 alert("驗證碼錯誤!"); 234 }else if(o.status==1){ 235 alert("註冊成功!"); 236 window.location.href="Login.html"; 237 }else{ 238 alert("註冊失敗!"); 239 window.location.href="Register.html"; 240 } 241 } 242 ); 243 return false; 244 }) 245 </script> 246 </html>