首页 > > 网页制作 > css >

注册页面

2018-06-24 01:52:45来源：未知阅读 ()

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