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 };