PHP ajax 验证+ 验证手机邮箱格式

效果图如下: （红色的为即时检测）

注意: 我编写php 使用的是xampp 和HBuilder

在html 和php 直接传参失败，只能将html 代码写到php当中才能在php当中传参成功

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
    <!--<script type = "text/javascript">
        $(document).ready(function(){
            $(".register input:first").blur(function(){
                $.ajax({
                    type: "post",
                    url: "register.php",
                    data: "username=" + $(".register input:first").val(),
                    success: function(msg) {
                        $("#userinfo").html(msg);
                    }
                });
            });
        });
    </script>-->
    <style type="text/css">
        *{margin:0px;padding:0px;}
        .register{width:600px;height:280px;padding:25px;margin:200px auto;border:2px solid #7aba5f;}
        .display {width:350px;height:60px;float:left;margin-right:20px;}
        .reginfo {width:150px;height:60px;float:left;margin-right:20px;color:#999999;font-size:13px;line-height:30px;}
        .register input{width:300px;height:30px;border:1px solid #7aba5f;}
        .register input.submit{width:100px;height:40px;color:white;font-size:16px;background:#7aba5f;border:none;margin-top:30px;margin-left:50px;}
        .register input.submit1{width:100px;height:40px;color:white;font-size:16px;background:#7aba5f;border:none;margin-top:30px;margin-left:50px;}
    </style>
</head>
<body>
    <form action="index_user.php" method="post" >
    <div class="register">
    <div class="display">
    账号:<input type="text" name="username"  />
    </div>
    <div class="reginfo" id="userinfo">
    请输入您的账号.
    </div>
    <div class="display">
    密码:<input type="password" name="password" />
    </div>
    <div class="reginfo">
    请输入您的密码.
    </div>
    <input type="submit" name="submit" size="30" value="登陆" class="submit" />
    
    <a href="register.php"><input type="button" name="submit" size="30" value="注册" class="submit1" /></a>
    
    </div>
    </form>
</body>
</html>
<?php

?>

index.php

 1 <?php
 2 include_once('conn.php');
 3 
 4 $name=$_POST['username'];
 5 $password=$_POST['password'];
 6 
 7 echo $name;
 8 echo $password;
 9 
10 if($name==''||$password==''){
11     echo "<script>alert('登陆失败！请查看是否注册或者输入是否正确！');history.go(-1);</script>";
12 }else{
13     $sql = "SELECT * FROM user where username='{$name}' and password='{$password}'";
14     $result=mysqli_query($conn, $sql);
15      $num=mysqli_num_rows($result);
16     if($num==0){
17         echo "<script>alert('登陆失败！请检查用户名密码是否正确！');history.go(-1);</script>";
18     }else{
19         echo "登陆成功!";
20     }
21 }
22 
23 ?>

index_user.php

  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_user_test.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:600px;height:400px;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     <form action="register_user.php" method="post" >
 32     <div class="register">
 33     <div class="display">
 34     账号:<input type="text" name="username"  />
 35     </div>
 36     <div class="reginfo" id="userinfo">
 37     请输入您的账号.*
 38     </div>
 39     <div class="display">
 40     密码:<input type="password" name="password" onblur="checkpwd(this)"/>
 41     </div>
 42     <div class="reginfo" id="pwds">
 43     请输入您的密码.*
 44     </div>
 45       <div class="display">
 46     电话:<input type="text" name="phone"  onblur="checkphone(this)"/>
 47     </div>
 48     <div class="reginfo" id="userphone">
 49     请输入您的电话.*
 50     </div> 
 51     <div class="display">
 52     地址:<input type="text" name="address"  onblur="checkaddress(this)"/>
 53     </div>
 54     <div class="reginfo" id="useraddress">
 55     请输入您的地址.
 56     </div>
 57     <div class="display">
 58     邮箱:<input type="text" name="email"  onblur="checkemail(this)"/>
 59     </div>
 60     <div class="reginfo" id="useremail">
 61     请输入您的邮箱.*
 62     </div>
 63     <input type="submit" name="submit" size="30" value="注册" class="submit" />
 64     </div>
 65     </form>
 66 </body>
 67 </html>
 68 <script>
 69     //检验密码
 70         function checkpwd(obj){
 71         var users=obj.value;
 72         if(users==""){
 73             document.getElementById("pwds").innerHTML="<font color=red style='font-size:16px;'><b>请填写密码!</b></font>";
 74             return false;
 75         }else if(users.length<=6){
 76             document.getElementById("pwds").innerHTML="<font color=red style='font-size:16px;'><b>密码长度不小于六位!</b></font>";
 77             return false;
 78         }
 79         else{
 80             document.getElementById("pwds").innerHTML="";
 81             return true;
 82         }
 83     }
 84     //检验地址
 85     function checkaddress(obj){
 86         var address=obj.value;
 87         if(address==""){
 88             document.getElementById("useraddress").innerHTML="<font color=red style='font-size:16px;'><b>请填写地址!</b></font>";
 89             return false;
 90         }else{
 91             document.getElementById("useraddress").innerHTML="";
 92             return true;
 93         }
 94     }
 95     
 96     //检验 手机号码
 97     function checkphone(obj){
 98         var phone=obj.value;
 99         var test=/^[1][3,4,5,7,8][0-9]{9}$/;
100         if(!test.test(phone)){
101             document.getElementById("userphone").innerHTML="<font color=red style='font-size:16px;'><b>请填写正确的手机号码!</b></font>";
102             return false;
103         }else{
104             document.getElementById("userphone").innerHTML="";
105             return true;
106         }
107     }
108     //检验邮箱
109     function checkemail(obj){
110         var email=obj.value;
111         var emails=/^[\w\-\.]+@[a-z0-9]+(\-[a-z0-9]+)?(\.[a-z0-9]+(\-[a-z0-9]+)?)*\.[a-z]{2,4}$/i;
112         if(emails.test(email)){
113             document.getElementById("useremail").innerHTML="";
114             return true;
115         }else{
116             document.getElementById("useremail").innerHTML="<font color=red style='font-size:16px;'><b>请填写正确邮箱地址!</b></font>";
117             return true;
118         }
119     }
120     
121 </script>

 1 <?php
 2 include_once('conn.php');
 3 
 4 $name=$_POST['username'];
 5 $password=$_POST['password'];
 6 $phone=$_POST['phone'];
 7 $address=$_POST['address'];
 8 $email=$_POST['email'];
 9 
10 
11 if($name==""||$password==""||$phone==""||$email==""){
12     echo "<script>alert('注册失败，请完整填写注册信息');history.go(-1);</script>";
13     
14 }else{
15 $sql = "insert into user(username,password,phone,address,email)values('{$name}','{$password}','{$phone}','{$address}','{$email}')";
16 
17 $result=mysqli_query($conn, $sql);
18 
19 if ($result) {
20     echo "注册成功，点击<a href='index.php'>此处登陆</a>";
21 } else {
22     echo "<script>alert('添加失败');history.go(-1);</script>";
23 }
24 }
25 ?>

register_user.php

 1 <?php
 2 $servername = "localhost";
 3 $username = "root";
 4 $password = "101032";
 5 $dbname = "db_database02";
 6  
 7 // 创建连接
 8 $conn = new mysqli($servername, $username, $password, $dbname);
 9 
10 if ($conn->connect_error) {
11     die("连接失败: " . $conn->connect_error);
12 } 
13  $name=$_POST['username'];
14 
15 $sql = "SELECT * FROM user where username='{$name}'";
16 
17  $result=mysqli_query($conn, $sql);
18  $num=mysqli_num_rows($result);
19  if($num==0){
20      echo "";
21  }else{
22      echo "<font color=red style='font-size:16px;'><b>抱歉,无法注册!</b></font>";
23  }
24 $conn->close();
25 ?>

register_user_test.php

1 <?php
2 $conn=mysqli_connect("localhost","root","101032","db_database02") or die("数据库连接失败");
3 
4 mysqli_query($conn,'set names utf8'); //告诉服务器，本页面的字符集是utf8
5 
6 ?>

conn.php

posted @ 2020-05-26 22:43 不懂就要问！阅读(332) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

半暖时光丶

PHP ajax 验证+ 验证手机邮箱格式

公告

半暖时光丶

PHP ajax 验证+ 验证手机 邮箱格式

公告

PHP ajax 验证+ 验证手机邮箱格式