註冊頁面

HTML代碼javascript

  1 <%@ page language="java" contentType="text/html; charset=utf-8"
  2     pageEncoding="utf-8"%>
  3 <%@ include file="base.jsp"%>
  4 <!DOCTYPE html>
  5 <html>
  6     <head>
  7         <meta charset="UTF-8">
 10         <title></title>
149     </head>
150     <body>
151         <!--頭部-->
152         <div id="nav" class="nav"></div>
153         <div class="center">
154             <div class="Title">
155                 <ul>
156                     <li><img src="${basePath}/static/img/imake.png"></li>
157                     <li></li>
158                 </ul>
159             </div>
160             <div class="bg_box">
161                 <div class="top_bg">
162                     <h3>註冊會員</h3>
163                     <ul>
164                         <h3>註冊</h3>
165                         <li>
166                             <input id="nickname" class="phone" type="text" placeholder="輸入暱稱"  />
                    <
img src="${basePath}/static/img/personal_icon_mandatory.png"> 167 <p class="error error_name"></p> 168 169 </li> 170 <li> 171 <input id="phone" class="phone" type="text" placeholder="輸入手機號碼" />
                    <
img src="${basePath}/static/img/personal_icon_mandatory.png"> 172 <p class="error error_phone"></p> 173 174 </li> 175 <li> 176 <input id="code" class="psd" type="text" placeholder="輸入驗證碼" />
                    <img class="img" src="${basePath}/static/img/personal_icon_mandatory.png"> 177 <button class="Verification" type="button" onclick="messageBtnn(this)">
                      
獲取驗證碼
                    </button> 178 <div style="clear: both;"></div> 179 <p class="error error_psd"></p> 180 181 </li> 182 <div style="clear: both;"></div> 183 <li> 184 <input id="pwd" class="psds" type="password" placeholder="輸入密碼" />
                    <
img src="${basePath}/static/img/personal_icon_mandatory.png"> 185 <p class="error error_psds"></p> 186 </li> 187 188 <li> 189 <button class="sure" type="button">肯定</button> 190 <p class="Return_login"><img src="${basePath}/static/img/register_icon_back.png">
                      返回登陸
                    </p> 191 </li> 192 </ul> 193 </div> 194 195 </div> 196 </div> 197 <div id="footer" class="footer"></div> 198 </body> 199 200 <script type="text/javascript"> 201 function getUrl(){ 202 return "${basePath}" 203 } 204 </script> 205 <script type="text/javascript" src="${basePath}/static/js/publick.js" ></script> 206 <script type="text/javascript" src="${basePath}/static/js/chkutil.js" ></script> 207 <script src="${basePath}/static/js/md5.js"></script> 208 209 <script type="text/javascript"> 210 var dizhi=getUrl(); //獲取項目地址 211 /* $('.psd').focus(function(){ 212 $('.psd').attr('type','password'); 213 }) */ 214 $(function() { 215 nav(0) 216 }) 217 218 //輸入框失去焦點進行數據校驗 219 var nickname; 220 $("#nickname").blur(function() { 221 nickname=$("#nickname").val(); 222 if(!ChkUtil.checkName(nickname)){ 223 $(".error_name").text("用戶名1~11位,包含漢字,字母,數字三種任意一種或者多種組合!"); 224 $("#nickname").css("border","1px solid red"); 225 $(".sure").attr({"disabled":"disabled"}); 226 }else{ 227 $.ajax({ 228 url : dizhi+"/user/beforeRegister", 229 type : "post", 230 data : { 231 "name":nickname 232 }, 233 success : function(data) { 234 if (data.status == "1") { 235 $(".error_name").text("對不起,該暱稱已經被註冊了!"); 236 $("#nickname").css("border","1px solid red"); 237 $(".sure").attr({"disabled":"disabled"}); 238 }else{ 239 $(".error_name").text(""); 240 $("#nickname").css("border","1px solid #D1D1D1"); 241 $(".sure").removeAttr("disabled"); 242 } 243 } 244 }); 245 } 246 }); 247 248 //輸入框失去焦點進行數據校驗 249 var phone; 250 $("#phone").blur(function() { 251 phone=$("#phone").val(); 252 if(phone==""||phone==null){ 253 $(".error_phone").text("手機號不能爲空!"); 254 $("#phone").css("border","1px solid red"); 255 $(".sure").attr({"disabled":"disabled"}); 256 }else if 257 (!ChkUtil.isPhone(phone)){ 258 $(".error_phone").text("手機號輸入有誤!"); 259 $("#phone").css("border","1px solid red"); 260 $(".sure").attr({"disabled":"disabled"}); 261 }else{ 262 $.ajax({ 263 url : dizhi+"/user/checkPhone", 264 type : "post", 265 data : { 266 "phone":phone 267 }, 268 success : function(data) { 269 270 if (data.status == 1) { 271 $(".error_phone").text("對不起,該手機已經被註冊了!"); 272 $("#phone").css("border","1px solid red") 273 $(".sure").attr({"disabled":"disabled"}); 274 }else{ 275 $(".error_phone").text(""); 276 $("#phone").css("border","1px solid #D1D1D1"); 277 $(".sure").removeAttr("disabled"); 278 } 279 } 280 }); 281 } 282 }); 283 343 var timer = 120; 344 var index = ""; 345 function messageBtnn(ev){ 346 if(timer == 120){ 347 $(ev).attr("disabled","disabled"); 348 $.post(dizhi+"/user/sendShortMessage", 349 { 350 phone : phone 351 }, 352 function(data){ 353 if(data.status == 0){ 354 layer.alert('發送失敗!', { 355 skin: 'layui-layer-red', 356 icon: 5,offset : ['220px'], 357 closeBtn : 0 //樣式類名 358 }); 359 $(".sure").attr({"disabled":"disabled"}); 360 }else if(data.status == -1){ 361 layer.alert('參數錯誤!', { 362 skin: 'layui-layer-red', 363 icon: 5,offset : ['220px'], 364 closeBtn : 0 //樣式類名 365 }); 366 $(".sure").attr({"disabled":"disabled"}); 367 }else if(data.status == -2){ 368 layer.alert('號碼已註冊!', { 369 skin: 'layui-layer-red', 370 icon: 5,offset : ['220px'], 371 closeBtn : 0 //樣式類名 372 }); 373 $(".sure").attr({"disabled":"disabled"}); 374 }else{ 375 //var sss=$(".Verification"); 376 //messageBtn(sss) 377 layer.alert('驗證碼已發送,請在兩分鐘內填寫驗證碼!', { 378 skin: 'layui-layer-sure', 379 icon: 6,offset : ['220px'], 380 closeBtn : 0 //樣式類名 381 }); 382 $(".sure").removeAttr("disabled"); 383 } 384 }) 385 } 386 timer--; 387 $(ev).html("從新獲取(" + timer + ")"); 388 index = window.setTimeout(function(){ 389 messageBtnn(ev); 390 }, 1000) 391 if(timer == -1){ 392 timer = 120; 393 $(ev).removeAttr("disabled"); 394 $(ev).html("獲取驗證碼"); 395 clearTimeout(index); 396 } 397 } 398 399 //輸入框失去焦點進行數據校驗 400 var code; 401 $("#code").blur(function() { 402 code=$("#code").val(); 403 if (code == ""||code==null) { 404 $(".error_psd").text("驗證碼不能爲空!");//非空校驗 405 $("#code").css("border","1px solid red") 406 $(".sure").attr({"disabled":"disabled"}); 407 }else{ //註冊重複校驗 408 $.ajax({ 409 url : dizhi+"/user/checkOutRandomCode", 410 type : "post", 411 data : { 412 phone : phone, 413 code : code 414 }, 415 success : function(data) { 416 if (data.status == -1) { 417 $(".error_psd").text("驗證碼輸入錯誤!"); 418 $("#code").css("border","1px solid red") 419 $(".sure").attr({"disabled":"disabled"}); 420 }else if(data.status == 0){ 421 $(".error_psd").text("驗證碼驗證超時!"); 422 $("#code").css("border","1px solid red") 423 $(".sure").attr({"disabled":"disabled"}); 424 }else{ 425 $(".error_psd").text(""); 426 $("#code").css("border","1px solid #D1D1D1") 427 $(".sure").removeAttr("disabled"); 428 } 429 } 430 }); 431 } 432 }); 433 434 //輸入框失去焦點進行數據校驗 435 var pwd; 436 $("#pwd").blur(function() { 437 pwd=$("#pwd").val(); 438 if(!ChkUtil.checkPassword(pwd)){ 439 $(".error_psds").text("密碼6~18位,包含數字、字母、符號三種任意一種或者多種組合!"); 440 $("#pwd").css("border","1px solid red") 441 $(".sure").attr({"disabled":"disabled"}); 442 }else{ 443 $(".error_psds").text(""); 444 $("#pwd").css("border","1px solid #D1D1D1") 445 $(".sure").removeAttr("disabled"); 446 } 447 }); 448 449 //ajax提交註冊信息 450 $(".sure").click(function(){ 451 452 //驗證用戶名 453 nickname=$("#nickname").val(); 454 if(!ChkUtil.checkName(nickname)){ 455 return false; 456 }else{ 457 $.ajax({ 458 url : dizhi+"/user/beforeRegister", 459 type : "post", 460 data : { 461 "name":nickname 462 }, 463 success : function(data) { 464 if (data.status == "1") { 465 return false; 466 } 467 } 468 }); 469 } 470 471 //驗證手機號 472 phone=$("#phone").val(); 473 if(!ChkUtil.checkPhone(phone)){ 474 return false; 475 }else{ 476 $.ajax({ 477 url : dizhi+"/user/checkPhone", 478 type : "post", 479 data : { 480 "phone":phone 481 }, 482 success : function(data) { 483 484 if (data.status == 1) { 485 return false; 486 } 487 } 488 }); 489 } 490 491 //驗證驗證碼 492 code=$("#code").val(); 493 if (code == ""||code==null) { 494 return false; 495 }else{ //註冊重複校驗 496 $.ajax({ 497 url : dizhi+"/user/checkOutRandomCode", 498 type : "post", 499 data : { 500 phone : phone, 501 code : code 502 }, 503 success : function(data) { 504 if (data.status == -1) { 505 return false; 506 }else if(data.status == 0){ 507 return false; 508 } 509 } 510 }); 511 } 512 513 //驗證密碼 514 pwd=$("#pwd").val(); 515 if(!ChkUtil.checkPassword(pwd)){ 516 return false; 517 } 518 519 var password=hex_md5(pwd); 520 $.ajax({ 521 url : dizhi+"/user/registerNewUser", 522 type : "post", 523 data : { 524 userName : nickname, 525 phone :phone, 526 pwd : password 527 }, 528 success : function(data) { 529 if (data.status == 1) { 530 window.location.href=dizhi+"/user/login_model"; 531 } 532 } 533 }); 534 535 }) 536 537 //點擊返回登陸按鈕回到登陸頁面 538 $(".Return_login").click(function(){ 539 window.location.href=dizhi+"/user/login_model" 540 }) 541 542 //監聽enter,這裏13即是enter的編號 543 $(window).keydown(function(event){ 544 545 if (event.keyCode == 13) { 546 $(".sure").trigger('click'); 547 } 548 }); 549 550 </script> 551 </html>

附上正則數據校驗css

  1 var ChkUtil = {};
  2 
  3 //驗證用戶名,用戶名/暱稱:1~11位,包含漢字,字母,數字三種任意一種或者多種組合
  4 ChkUtil.checkName = function(str){
  5     var patrn = /^[\w\u4e00-\u9fa5]{1,11}$/;
  6     if(str == null || str == ''){
  7         return false;
  8     }else{
  9         return patrn.test(str);
 10     }
 11 }
 12 
 13 //驗證密碼,密碼:6~18位,包含數字、字母、符號三種任意一種或者多種組合
 14 ChkUtil.checkPassword = function(str){
 15     var patrn = /^[\S\s\w]{6,18}$/
 16     if(str == null || str == ''){
 17         return false;
 18     }else{
 19         return patrn.test(str);
 20     }
 21 }
 22 
 23 //產品名:1~15位,包含漢字,字母,數字三種任意一種或者多種組合
 24 ChkUtil.checkProductName = function(str){
 25     var patrn =/^[\w\u4e00-\u9fa5]{1,15}$/;
 26     if(str == null || str == ''){
 27         return false;
 28     }else{
 29         return patrn.test(str);
 30     }
 31 }
 32 //公司名:1~25位,包含漢字,字母,數字三種任意一種或者多種組合
 33 ChkUtil.companyName = function(str){
 34     var patrn =/^[\w\u4e00-\u9fa5]{1,15}$/;
 35     if(str == null || str == ''){
 36         return false;
 37     }else{
 38         return patrn.test(str);
 39     }
 40 }
 41 
 42 //需求簡述:30位
 43 ChkUtil.checkProductInfo = function(str){
 44     if(str != null && str != ''&&str.length <= 30){
 45         return true;
 46     }else{
 47         return false;
 48     }
 49 }
 50 
 51 //需求詳述:255字
 52 ChkUtil.checkProductDetail = function(str){
 53     if(str != null && str != ''&&str.length <= 255){
 54         return true;
 55     }else{
 56         return false;
 57     }
 58 }
 59 
 60 //預算:整數部位1-7,小數部位1-2或沒有小數
 61 ChkUtil.checkBudget = function(str){
 62     var patrn = /^(([1-9][\d]{0,6}(\.\d{1,2})?)|(0(\.\d{1,2})?))$/
 63     if(str == null || str == ''){
 64         return false;
 65     }else{
 66         return patrn.test(str);
 67     }
 68 } 
 69 
 70 //手機號:只能11位
 71 ChkUtil.checkPhone = function(str){
 72     var patrn = /^[\d]{11}$/
 73     if(str == null || str == ''){
 74         return false;
 75     }else{
 76         return patrn.test(str);
 77     }
 78 }
 79 
 80 //評論/回覆字數:255位
 81 ChkUtil.checkCommentContent = function(str){
 82     if(str != null && str != ''&&str.length <= 255){
 83         return true;
 84     }else{
 85         return false;
 86     }
 87 }
 88 
 89 //搜索輸入:0~15位
 90 ChkUtil.checkSearch = function(str){
 91     if(str.length <= 15){
 92         return true;
 93     }else{
 94         return false;
 95     }
 96 }
 97 
 98 
 99 // 校驗是否僅中文
100 ChkUtil.isChinese = function(str) {
101     var patrn = /[\u4E00-\u9FA5\uF900-\uFA2D]+$/;
102     return patrn.test(str);
103 };
104 
105 // 校驗字符串:只能輸入6-20個字母、數字、下劃線(經常使用手校驗用戶名和密碼)
106 ChkUtil.isString6_20 = function(str) {
107     var patrn = /^(\w){6,20}$/;
108     return patrn.test(str);
109 };
110 
111 //校驗字符串:只能輸入6-20個字母、數字、下劃線(經常使用手校驗用戶名和密碼)
112 ChkUtil.isString6_200 = function(str) {
113     var patrn = /^(\w){6,200}$/;
114     return patrn.test(str);
115 };
116 
117 
118 //校驗字符串:只能輸入字母、數字、下劃線(經常使用手校驗用戶名和密碼)
119 ChkUtil.isString = function(str) {
120     var patrn = /^(\w)/;
121     return patrn.test(str);
122 };
123 
124 //校驗字符串:只含有漢字、數字、字母、下劃線不能如下劃線開頭和結尾
125 ChkUtil.isString_two = function(str) {
126     var patrn = /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
127     return patrn.test(str);
128 };
129 
130 //校驗字符串:只含有漢字、數字、字母、"-"不能以"-"開頭和結尾
131 ChkUtil.detailed = function(str) {
132     var patrn = /^(?!-)(?!.*?-$)[a-zA-Z0-9-\u4e00-\u9fa5]+$/;
133     return patrn.test(str);
134 };
135 
136 //校驗內容是否只爲數字、字母
137 ChkUtil.isLetterOrDigital = function(str) {
138     var patrn = /^[0-9a-zA-Z]*$/g;
139     return patrn.test(str);
140 };
141 
142 // 校驗電話號碼
143 ChkUtil.isPhone = function(str) {
144     var patrn = /^1[3|4|5|8]\d{9}$/;
145     return patrn.test(str);
146 };
147 
148 // 校驗電郵地址
149 ChkUtil.isEmail = function(str) {
150     var patrn = /^[\w-]+@[\w-]+(\.[\w-]+)+$/;
151     return patrn.test(str);
152 };
153 
154 ChkUtil.checkEmail = function(str) {
155     if (str.match(/[A-Za-z0-9_-]+[@](\S*)(net|com|cn|org|cc|tv|[0-9]{1,3})(\S*)/g) == null) {
156         return false;
157     } else {
158         return true;
159     }
160 }
161 //校驗社會信用代碼由18位數字或大寫字母組成
162 ChkUtil.creditCode = function(str) {
163     var patrn = /[0-9A-Z]{18}/;
164     return patrn.test(str);
165 };
166 // 校驗是否全是數字
167 ChkUtil.isDigit = function(str) {
168     var patrn = /^\d+$/;
169     return patrn.test(str);
170 };
171 
172 //校驗是不是數字 包含小數
173 ChkUtil.isDigitDecimal = function(str) {
174     var patrn1 = /^-?\d+\.\d+$/;
175     var patrn2 = /^\d+$/;
176     if(patrn1.test(str) || patrn2.test(str)){
177         return true;
178     }else{
179         return false;
180     }
181 };
182 
183 // 校驗是不是整數
184 ChkUtil.isInteger = function(str) {
185     var patrn = /^([+-]?)(\d+)$/;
186     return patrn.test(str);
187 };
188 
189 /**
190  * 檢查QQ的格式是否正確 輸入:str 字符串 返回:true 或 flase; true表示格式正確
191  */
192 ChkUtil.checkQQ = function(str) {
193     if (str.match(/^\d{5,10}$/) == null) {
194         return false;
195     } else {
196         return true;
197     }
198 };
199 
200 function fucCheckLength(strTemp) {
201     var i,sum;
202     sum=0;
203     for(i=0;i<strTemp.length;i++) {
204         if ((strTemp.charCodeAt(i)>=0) && (strTemp.charCodeAt(i)<=255)) {
205           sum=sum+1;
206         }else {
207           sum=sum+2;
208         }
209     }
210     return sum;
211 };
212 
213 /**
214  * 比較日期大小 返回:true 或 flase; true表示格式正確
215  */
216 ChkUtil.compareDate = function(oleDate, newDate) {
217     if(ChkUtil.isNotEmpty(oleDate) && ChkUtil.isNotEmpty(newDate)){
218         var d1 = new Date(oleDate.replace(/\-/g, "\/"));
219         var d2 = new Date(newDate.replace(/\-/g, "\/"));  
220         if(d1 > d2) {
221             return false;
222         }else{
223             return true;
224         }
225     }else{
226         return false;
227     }
228     
229 };
230 
231 /**
232  * 判斷字符串不爲空
233  */
234 ChkUtil.isNotEmpty = function(param){
235     if(param != null && param != '' && typeof(param) != 'undefined'){
236         return true;
237     }else{
238         return false;
239     }
240 }
241 
242 
243 /**
244  * 身份證15位編碼規則:dddddd yymmdd xx p dddddd:地區碼 yymmdd: 出生年月日 xx: 順序類編碼,沒法肯定 p:
245  * 性別,奇數爲男,偶數爲女
246  * <p />
247  * 身份證18位編碼規則:dddddd yyyymmdd xxx y dddddd:地區碼 yyyymmdd: 出生年月日
248  * xxx:順序類編碼,沒法肯定,奇數爲男,偶數爲女 y: 校驗碼,該位數值可經過前17位計算得到
249  * <p />
250  * 18 位號碼加權因子爲(從右到左) Wi = [ 7, 9, 10, 5,& nbsp;8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8,
251  * 4, 2,1 ] 驗證位 Y = [ 1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2 ] 校驗位計算公式:Y_P = mod(
252  * ∑(Ai×Wi),11 ) i爲身份證號碼從右往左數的 2...18 位; Y_P爲腳丫校驗碼所在校驗碼數組位置
253  * 
254  */
255 var Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1 ];// 加權因子
256 var ValideCode = [ 1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2 ];// 身份證驗證位值.10表明X
257 function IdCardValidate(idCard) {
258     idCard = trim(idCard.replace(/ /g, ""));
259     if (idCard.length == 15) {
260         return isValidityBrithBy15IdCard(idCard);
261     } else if (idCard.length == 18) {
262         var a_idCard = idCard.split("");// 獲得身份證數組
263         if (isValidityBrithBy18IdCard(idCard)
264                 && isTrueValidateCodeBy18IdCard(a_idCard)) {
265             return true;
266         } else {
267             return false;
268         }
269     } else {
270         return false;
271     }
272 };
273 
274 /**
275  * 判斷身份證號碼爲18位時最後的驗證位是否正確
276  * 
277  * @param a_idCard
278  *            身份證號碼數組
279  * @return
280  */
281 function isTrueValidateCodeBy18IdCard(a_idCard) {
282     var sum = 0; // 聲明加權求和變量
283     if (a_idCard[17].toLowerCase() == 'x') {
284         a_idCard[17] = 10;// 將最後位爲x的驗證碼替換爲10方便後續操做
285     }
286     for (var i = 0; i < 17; i++) {
287         sum += Wi[i] * a_idCard[i];// 加權求和
288     }
289     valCodePosition = sum % 11;// 獲得驗證碼所位置
290     if (a_idCard[17] == ValideCode[valCodePosition]) {
291         return true;
292     } else {
293         return false;
294     }
295 };
296 
297 /**
298  * 經過身份證判斷是男是女
299  * 
300  * @param idCard
301  *            15/18位身份證號碼
302  * @return 'female'-女、'male'-男
303  */
304 function maleOrFemalByIdCard(idCard) {
305     idCard = trim(idCard.replace(/ /g, ""));// 對身份證號碼作處理。包括字符間有空格。
306     if (idCard.length == 15) {
307         if (idCard.substring(14, 15) % 2 == 0) {
308             return 'female';
309         } else {
310             return 'male';
311         }
312     } else if (idCard.length == 18) {
313         if (idCard.substring(14, 17) % 2 == 0) {
314             return 'female';
315         } else {
316             return 'male';
317         }
318     } else {
319         return null;
320     }
321 };
322 
323 /**
324  * 驗證18位數身份證號碼中的生日是不是有效生日
325  * 
326  * @param idCard
327  *            18位書身份證字符串
328  * @return
329  */
330 function isValidityBrithBy18IdCard(idCard18) {
331     var year = idCard18.substring(6, 10);
332     var month = idCard18.substring(10, 12);
333     var day = idCard18.substring(12, 14);
334     var temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day));
335     // 這裏用getFullYear()獲取年份,避免千年蟲問題
336     if (temp_date.getFullYear() != parseFloat(year)
337             || temp_date.getMonth() != parseFloat(month) - 1
338             || temp_date.getDate() != parseFloat(day)) {
339         return false;
340     } else {
341         return true;
342     }
343 };
344 
345 /**
346  * 驗證15位數身份證號碼中的生日是不是有效生日
347  * 
348  * @param idCard15
349  *            15位書身份證字符串
350  * @return
351  */
352 function isValidityBrithBy15IdCard(idCard15) {
353     var year = idCard15.substring(6, 8);
354     var month = idCard15.substring(8, 10);
355     var day = idCard15.substring(10, 12);
356     var temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day));
357     // 對於老身份證中的你年齡則不需考慮千年蟲問題而使用getYear()方法
358     if (temp_date.getYear() != parseFloat(year)
359             || temp_date.getMonth() != parseFloat(month) - 1
360             || temp_date.getDate() != parseFloat(day)) {
361         return false;
362     } else {
363         return true;
364     }
365 };
366 
367 // 去掉字符串頭尾空格
368 function trim(str) {
369     return str.replace(/(^\s*)|(\s*$)/g, "");
370 };
View Code
相關文章
相關標籤/搜索