无刷新注册代码，带验证

无刷新注册代码，带验证

 无刷新注册代码，带验证,本例没有判断帐号是否已经存在，如果需要可以参考《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