• php用户注册页面利用js进行表单验证具体实例


      1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
      2 <html xmlns="http://www.w3.org/1999/xhtml"> 
      3     <head> 
      4         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
      5         <title>用户注册 - 脚本之家</title> 
      6         <link href="../css/login.css" rel="stylesheet" type="text/css" /> 
      7         <link href="../css/page_bottom.css" rel="stylesheet" type="text/css" /> 
      8         <script type="text/javascript" src="../js/jquery-1.7.1.js"></script> 
      9         <script type="text/javascript"> 
     10             var flag = { 
     11                 "email":false, 
     12                 "nickname":false, 
     13                 "password":false, 
     14                 "verify":false 
     15             }; 
     16 
     17             $(function(){ 
     18                 $("#txtEmail").blur(function () { 
     19                                         var email=$(this).val(); 
     20                                         //alert(email); 
     21                                         if(email==""){ 
     22                                             $("#email\.info").html("Email地址不能为空"); 
     23                                             return; 
     24                                         } 
     25                                         var pattern=/(^['_A-Za-z0-9-]+(.['_A-Za-z0-9-]+)*@([A-Za-z0-9-])+(.[A-Za-z0-9-]+)*((.[A-Za-z0-9]{2,})|(.[A-Za-z0-9]{2,}.[A-Za-z0-9]{2,}))$)/; 
     26                                         if(!pattern.test(email)){ 
     27                                             $("#email\.info").html("Email格式不正确"); 
     28                                             return; 
     29                                         } 
     30                                         $.get("check_email.php?email="+email,null, 
     31                                             function(data){ 
     32                                                 $("#email\.info").html(data); 
     33                                                 if (data=="可以注册") { 
     34                                                     flag.email=true; 
     35                                                 } 
     36                                             } 
     37                                         ); 
     38                                     }); 
     39                 $("#txtNickName").blur(function () { 
     40                                             var nickname=$(this).val(); 
     41                                             if(nickname==""){ 
     42                                                 $("#name\.info").html("昵称不能为空"); 
     43                                                 return; 
     44                                             } 
     45                                             var pattern = /(^['A-Za-z0-9]{4,20}$)/; 
     46                                             if (!pattern.test(nickname)) { 
     47                                                 $("#name\.info").html("昵称格式不正确"); 
     48                                                 return; 
     49                                             }else{ 
     50                                                 $("#name\.info").html("昵称格式正确"); 
     51                                                 flag.nickname=true; 
     52                                                 return; 
     53                                             } 
     54                                        }); 
     55                 $("#txtPassword").blur(function () { 
     56                                             var password=$(this).val(); 
     57                                             if (password=="") { 
     58                                                 $("#password\.info").html("密码不能为空"); 
     59                                                 return; 
     60                                             } 
     61                                             var pattern = /(^['A-Za-z0-9]{4,20}$)/; 
     62                                             if (!pattern.test(password)) { 
     63                                                 $("#password\.info").html("密码格式不正确"); 
     64                                                 return;    
     65                                             }else{ 
     66                                                 $("#password\.info").html("密码格式正确"); 
     67                                                 //flag.password=true; 
     68                                                 return; 
     69                                             } 
     70                                        }); 
     71                 $("#txtRepeatPass").blur(function () { 
     72                                             var password1=$(this).val(); 
     73                                             if (password1=="") { 
     74                                                 $("#password1\.info").html("密码不能为空"); 
     75                                                 return; 
     76                                             } 
     77                                             var pattern = /(^['A-Za-z0-9]{4,20}$)/; 
     78                                             if (!pattern.test(password1)) { 
     79                                                 $("#password1\.info").html("密码格式不正确"); 
     80                                                 return;    
     81                                             }else if(password1!=$("#txtPassword").val()){ 
     82                                                 $("#password1\.info").html("两次输入的密码不一致"); 
     83                                                 return; 
     84                                             }else{ 
     85                                                 $("#password1\.info").html("重复密码正确"); 
     86                                                 flag.password=true; 
     87                                                 return; 
     88                                             }                                             
     89                                         }); 
     90                 $("#txtVerifyCode").blur(function () { 
     91                                             var verify=$(this).val(); 
     92                                             if(verify==""){ 
     93                                                 $("#number\.info").html("验证码不能为空"); 
     94                                                 return; 
     95                                             } 
     96                                             $.post("./verify/check.php",{verify:verify}, 
     97                                                 function(data){ 
     98                                                     $("#number\.info").html(data); 
     99                                                     if (data=="验证成功") { 
    100                                                         flag.verify=true; 
    101                                                     } 
    102                                                 } 
    103                                             ); 
    104                                          }) 
    105                 $("#f").submit(function(){ 
    106                                     var ok = flag.email&&flag.password&&flag.verify&&flag.nickname; 
    107                                     if(ok==false){ 
    108                                         alert("表单项正在检测或存在错误"); 
    109                                         history.back(); 
    110                                         return false; 
    111                                     } 
    112                                     return true; 
    113                                 });  
    114             }) 
    115         </script> 
    116     </head> 
    117     <body> 
    118         <?php include("../common/head.php"); ?> 
    119         <div class="login_step"> 
    120             注册步骤:<span class="red_bold">1.填写信息</span> > 2.验证邮箱 > 3.注册成功 
    121         </div> 
    122         <div class="fill_message"> 
    123             <form name="ctl00" method="post" action="save_reg.php" id="f"> 
    124                 <h2>以下均为必填项</h2> 
    125                 <table class="tab_login" > 
    126                     <tr> 
    127                         <td valign="top" class="w1">请填写您的Email地址:</td> 
    128                         <td> 
    129                             <input name="email" type="text" id="txtEmail" class="text_input"/> 
    130                             <div class="text_left" id="emailValidMsg"> 
    131                                 <p>请填写有效的Email地址。</p> 
    132                                 <span id="email.info" style="color:red"></span> 
    133                             </div> 
    134                         </td> 
    135                     </tr> 
    136                     <tr> 
    137                         <td valign="top" class="w1">设置您在脚本之家的昵称:</td> 
    138                         <td> 
    139                             <input name="nickname" type="text" id="txtNickName" class="text_input" /> 
    140                             <div class="text_left" id="nickNameValidMsg"> 
    141                                 <p>由小写英文字母、中文、数字组成,长度4-20个字符,一个汉字为两个字符。</p> 
    142                                 <span id="name.info" style="color:red"></span> 
    143                             </div> 
    144                         </td> 
    145                     </tr> 
    146                     <tr> 
    147                         <td valign="top" class="w1">设置密码:</td> 
    148                         <td> 
    149                             <input name="password" type="password" id="txtPassword" class="text_input" /> 
    150                             <div class="text_left" id="passwordValidMsg"> 
    151                                 <p>您的密码可以由大小写英文字母、数字组成,长度6-20位。</p> 
    152                                 <span id="password.info" style="color:red"></span> 
    153                             </div> 
    154                         </td> 
    155                     </tr> 
    156                     <tr> 
    157                         <td valign="top" class="w1">再次输入您设置的密码:</td> 
    158                         <td> 
    159                             <input name="password1" type="password" id="txtRepeatPass" class="text_input"/> 
    160                             <div class="text_left" id="repeatPassValidMsg"> 
    161                             <span id="password1.info" style="color:red"></span> 
    162                             </div> 
    163                         </td> 
    164                     </tr> 
    165                     <tr> 
    166                         <td valign="top" class="w1">验证码:</td> 
    167                         <td> 
    168                             <img class="yzm_img" id='imgVcode' src='./verify/verify.php' style="cursor:pointer" border='0' onclick="document.getElementById('imgVcode').src='./verify/verify.php?t='+Math.random()"/> 
    169                             <input name="number" type="text" id="txtVerifyCode" class="yzm_input"/> 
    170                             <div class="text_left t1"> 
    171                                 <p class="t1"> 
    172                                     <span id="vcodeValidMsg">请输入图片中的四个字母。</span>                                     
    173                                     <a href="#" style="cursor:pointer" onclick="document.getElementById('imgVcode').src='./verify/verify.php?t='+Math.random()">看不清楚?换个图片</a> 
    174                                     <br /> 
    175                                     <span id="number.info" style="color:red"></span> 
    176                                 </p> 
    177                             </div> 
    178                         </td> 
    179                     </tr> 
    180                 </table> 
    181 
    182                 <div class="login_in"> 
    183                     <input id="btnClientRegister" class="button_1" name="submit" type="submit" value="注 册"/> 
    184                 </div> 
    185             </form> 
    186         </div> 
    187         <?php include("../common/foot.php"); ?> 
    188     </body> 
    189 </html>
  • 相关阅读:
    MySql锁机制
    Mysql存储引擎
    Linux 系统中安装mysql
    常见的系统架构
    Linux环境下搭建go开发环境
    Ajax概述
    正向代理和反向代理
    Mysql 存储过程以及在.net中的应用示例
    Mysql 事务
    Windows服务器实现自动化部署-Jenkins
  • 原文地址:https://www.cnblogs.com/xiaolang1/p/4323214.html
Copyright © 2020-2023  润新知