注册页面
HTML代码
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>
附上正则数据校验
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 };
knmz
