无刷新注册代码,带验证

无刷新注册代码,带验证

 无刷新注册代码,带验证,本例没有判断帐号是否已经存在,如果需要可以参考《Ajax用户注册验证 验证合格才能提交表单》

 

 

PHP Code
  1. <?php  
  2.   
  3. if($_POST)  
  4. {  
  5. $name = $_POST['name'];   
  6. $email = $_POST['email'];    
  7. $username = $_POST['username'];   
  8. $password = $_POST['password'];   
  9. $gender = $_POST['gender'];   
  10. // Full Name  
  11. if (eregi('^[A-Za-z0-9 ]{3,20}$',$name))  
  12.  {  
  13.        $valid_name=$name;  
  14.  }  
  15. else  
  16. {    
  17.     $error_name='Enter valid Name.';    
  18. }  
  19. // Email   
  20. if (eregi('^[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.([a-zA-Z]{2,4})$'$email))  
  21.  {  
  22.        $valid_email=$email;   
  23.  }  
  24. else  
  25. {    
  26.     $error_email='Enter valid Email.';    
  27. }  
  28. // Usename min 2 char max 20 char  
  29. if (eregi('^[A-Za-z0-9_]{3,20}$',$username))  
  30.  {  
  31.        $valid_username=$username;  
  32.  }  
  33. else  
  34. {  $error_username='Enter valid Username min 3 Chars.';  }  
  35.   
  36. // Password min 6 char max 20 char  
  37.   
  38. if (eregi('^[A-Za-z0-9!@#$%^&*()_]{6,20}$',$password))  
  39.  {  
  40.       $valid_password=$password;  
  41.  }  
  42. else  
  43. {    
  44.     $error_password='Enter valid Password min 6 Chars.';    
  45. }  
  46.   
  47. // Gender  
  48. if ($gender==0)  
  49.  {  
  50.         $error_gender='Select Gender';   
  51.  }  
  52. else  
  53. {    
  54. $valid_gender=$gender;  
  55.       
  56. }  
  57.   
  58. if((strlen($valid_name)>0)&&(strlen($valid_email)>0)&&(strlen($valid_username)>0)&&(strlen($valid_password)>0) && $valid_gender>0 )  
  59. {  
  60. //mysql_query(' SQL insert statement');  
  61. header("Location: thanks.html");  
  62.   
  63. }  
  64. else  
  65. {  
  66. }  
  67.   
  68. }  
  69. ?>  

 

CSS Code
  1. <style type="text/css">  
  2. .err  
  3. {  
  4. font-size:11px;  
  5. padding-left:10px;  
  6. color:#CC0000;  
  7. float:left;  
  8.   
  9. }  
  10. input  
  11. {  
  12. float:left;  
  13.   
  14. }  
  15. </style>  

 

XML/HTML Code
  1. <form autocomplete="off"  
  2.     enctype="multipart/form-data" method="post" action=""  name="form">  
  3.   
  4.   
  5.   
  6. <ul>  
  7.           
  8.       
  9. <li id="foli1"      class="   ">  
  10.     <label class="desc" id="title1" for="Field1">  
  11.         Full Name           </label>  
  12.     <div>  
  13.         <input id="name"            name="name"             type="text"             class="field text medium"           value="<?php echo $valid_name; ?>"          maxlength="255"             tabindex="1"                        /><span class="err"> <?php echo $error_name; ?></span>  
  14.         </div>  
  15.     </li>  
  16.       
  17.   
  18. <li id="foli2"      class="   ">  
  19.     <label class="desc" id="title2" for="Field2">  
  20.         Email           </label>  
  21.     <div>  
  22.         <input id="email"           name="email"            type="text"             class="field text medium"           value="<?php echo $valid_email; ?>"             maxlength="255"             tabindex="2"                        /><span class="err"> <?php echo $error_email; ?></span>  
  23.         </div>  
  24.     </li>  
  25.   
  26.   
  27. <li id="foli3"      class="   ">  
  28.     <label class="desc" id="title3" for="Field3">  
  29.         User-ID         </label>  
  30.     <div>  
  31.         <input id="username"            name="username"             type="text"             class="field text medium"           value="<?php echo $valid_username; ?>"          maxlength="255"             tabindex="3"  /><span class="err"> <?php echo $error_username; ?></span>  
  32.         </div>  
  33.     </li>  
  34.   
  35.   
  36. <li id="foli4"      class="   ">  
  37.     <label class="desc" id="title4" for="Field4">  
  38.         Password            </label>  
  39.     <div>  
  40.         <input id="password"            name="password"             type="password"             class="field text medium"           value="<?php echo $valid_password; ?>"          maxlength="255"             tabindex="4"                        /><span class="err"> <?php echo $error_password; ?></span>  
  41.         </div>  
  42.     </li>  
  43.   
  44.   
  45. <li id="foli6"      class="   ">  
  46.     <label class="desc" id="title6" for="Field6">  
  47.         Gender          </label>  
  48.     <div>  
  49.         <select id="gender"             name="gender"           class="field select medium"             tabindex="5" style="float:left">   
  50.                         <option value="0">Gender</option><option value="1">Male</option><option value="2">Female</option>  
  51.           </select><span class="err"> <?php echo $error_gender; ?></span>  
  52.     </div>  
  53.     </li>  
  54.   
  55.   
  56. <li id="foli15"         class="   "></li>  
  57.   
  58.   
  59. <li class="buttons">  
  60.                 <input  type="submit" value="Submit" style=" background:#0060a1; color:#FFFFFF; font-size:14px; border:1px solid #0060a1"/>  
  61.       </li>  
  62.   
  63.       
  64. </ul>  
  65. </form>  

 


原文地址:http://www.freejs.net/article_biaodan_69.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的使用 JavaScript 实现用户注册验证代码示例: 1. 界面部分 ```html <form id="register-form" method="post" action="register.php"> <input type="text" name="username" placeholder="用户名" required> <input type="password" name="password" placeholder="密码" required> <input type="email" name="email" placeholder="邮箱" required> <input type="tel" name="phone" placeholder="电话" required> <input type="text" name="captcha" placeholder="验证码" required> <img id="captcha-img" src="captcha.php" onclick="refreshCaptcha();" alt="验证码"> <input type="submit" value="注册"> </form> ``` 2. 前端验证部分 ```javascript function refreshCaptcha() { var captchaImg = document.getElementById("captcha-img"); captchaImg.src = "captcha.php?" + Math.random(); } function validateForm() { var username = document.forms["register-form"]["username"].value; var password = document.forms["register-form"]["password"].value; var email = document.forms["register-form"]["email"].value; var phone = document.forms["register-form"]["phone"].value; var captcha = document.forms["register-form"]["captcha"].value; if (username == "") { alert("请输入用户名"); return false; } if (password == "") { alert("请输入密码"); return false; } if (email == "") { alert("请输入邮箱"); return false; } if (phone == "") { alert("请输入电话"); return false; } if (captcha == "") { alert("请输入验证码"); return false; } return true; } ``` 3. 后端验证部分与验证码生成部分同上。 在以上代码中,`refreshCaptcha()` 函数用于刷新验证码图片,`validateForm()` 函数用于在用户提交表单时验证用户输入的信息,如果有任何一个输入框为空,则会弹出一个警告框提示用户输入信息,如果所有输入框都不为空,则返回 `true`,表示表单验证通过,可以提交表单了。 需要注意的是,前端验证只是为了提高用户体验,防止用户因为忘记输入某些信息而提交失败,但是前端验证并不能完全保证数据的安全性,真正的数据验证必须在后端进行,因此,后端验证验证码的生成与验证是必不可少的。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值