ajax php 驗證註冊用戶名是否存在

時間 2019-11-16

標籤 ajax php 驗證註冊用戶名是否存在欄目 Ajax 简体版

原文原文鏈接

1.在"test"數據庫中,創建一張名爲"user"的表.javascript

sql語句:php

1 create table `user`(
2 `id` int(5) not null auto_increment primary key,
3 `username` varchar(10) not null,
4 `password` varchar(12) not null,  
5 `email` varchar(50) not null
6 );

2.新建register.html文件css

 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" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>Document</title>
 6     <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
 7     <script type = "text/javascript"> 
 8         $(document).ready(function(){
 9             $(".register input:first").blur(function(){
10                 $.ajax({
11                     type: "post",
12                     url: "register.php",
13                     data: "username=" + $(".register input:first").val(),
14                     success: function(msg) {
15                         $("#userinfo").html(msg);
16                     }
17                 });
18             });
19         }); 
20     </script>
21     <style type="text/css">
22         *{margin:0px;padding:0px;}
23         .register{width:550px;height:250px;padding:25px;margin:200px auto;border:2px solid #7aba5f;}
24         .display {width:350px;height:60px;float:left;margin-right:20px;}
25         .reginfo {width:150px;height:60px;float:left;margin-right:20px;color:#999999;font-size:13px;line-height:30px;}
26         .register input{width:300px;height:30px;border:1px solid #7aba5f;}
27         .register input.submit{width:100px;height:40px;color:white;font-size:16px;background:#7aba5f;border:none;margin-top:30px;margin-left:150px;}
28     </style>
29 </head>
30 <body>
31     <div class="register">
32     <div class="display">
33     帳號:<input type="text" name="username"  />
34     </div>
35     <div class="reginfo" id="userinfo">
36     請輸入您的帳號.
37     </div>
38     <div class="display">
39     密碼:<input type="password" name="password" />
40     </div>
41     <div class="reginfo">
42     請輸入您的密碼.
43     </div>
44     <div class="display">
45     郵箱:<input type="text" name="email"  />
46     </div>
47     <div class="reginfo">
48     請輸入您的郵箱.
49     </div>
50     <input type="submit" name="submit" size="30" value="註冊" class="submit" />
51     </div>
52 </body>
53 </html>

3.新建register.php文件html

 1 <?php
 2     $username = $_POST['username'];
 3     if (!empty($username)) {
 4     mysql_connect("127.0.0.1", "root", ""); 
 5     mysql_select_db("test");
 6     $sql = "SELECT `username` FROM `user` WHERE `username` = '$username' LIMIT 1";
 7     $re = mysql_query($sql);
 8     while ($row = mysql_fetch_assoc($re)) {
 9     $temp = $row;
10     }
11     if (empty($temp)) {
12     echo "<font color=green style='font-size:16px;'><b>恭喜,能夠註冊!</b></font>";
13     } else {
14     echo "<font color=red style='font-size:16px;'><b>抱歉,沒法註冊!</b></font>";
15     }
16     } else {
17     echo "<font color=red style='font-size:16px;'><b>請輸入您的帳號.</b></font>";
18     }             
19                     
20 
21 ?>