jquery注冊驗證的寫法

在做注冊頁面時會用到jquery驗證注冊信息，用戶名，密碼，郵箱，手機號的驗證，比較簡單的，新手莫怪...

    <script>
        function Name(){
            var name = $("#name").val();
            if(name=="") {
                $("#tip1").html("<div style='color:#2ca9cc;font-size:14px;'>請輸入用戶名</div>");
            }
        }
        function checkName(){
            var name = $("#name").val();
            if(name==""){
                $("#tip1").html("<div style='color:red;font-size:14px;'>用戶名不能為空</div>");
            }else{
                $("#tip1").html("");
            }
        }
        function Password(){
            var name = $("#password").val();
            if(name=="") {
                $("#tip2").html("<div style='color:#2ca9cc;font-size:14px;'>請輸入密碼</div>");
            }
        }
        function checkPassword(){
            var name = $("#password").val();
            if(name==""){
                $("#tip2").html("<div style='color:red;font-size:14px;'>密碼不能為空</div>");
            }else{
                $("#tip2").html("");
            }
        }
        function Email(){
            var name = $("#email").val();
            if(name=="") {
                $("#tip3").html("<div style='color:#2ca9cc;font-size:14px;'>請輸入郵箱</div>");
            }
        }
        function checkEmail(){
            var name = $("#email").val();
            var zheng =/^[\w\.]+@[\w\.]+(\.\w+)+$/;
            if(!zheng.test(name)){
                $("#tip3").html("<div style='color:red;font-size:14px;'>郵箱格式錯誤</div>");
            }else{
                $("#tip3").html("");
            }
        }
        function Phone(){
            var name=$("#phone").val().length;
            if( name ==0) {
                $("#tip4").html("<div style='color:#2ca9cc;font-size:14px;'>請輸入手機號</div>");
            }
        }
        function checkPhone(){
            var name=$("#phone").val().length;
            if(name!==11) {
                $("#tip4").html("<div style='color:red;font-size:14px;'>手機號位數不正確</div>");
            }else{
                $("#tip4").html("");
            }
        }
        function check(){
                $.ajax({
                    url: "./checkajax.php",
                    type: "post",
                    data:$('form').serialize(),
                    success: function (response) {
                        if (response == 1) {
                            $("#tip").html("用戶名不能為空");
                        } else if (response == 2) {
                            $("#tip").html("密碼不能為空");
                        } else if (response == 3) {
                        $("#tip").html("注冊成功");
                        } else {
                            $("#tip").html("注冊失敗");
                        }
                    }
                });
            }
    </script>

 

 ajax提交數據到php文件進行判斷

<?php
$pdo = new PDO("mysql:host=localhost;dbname=project",
    "root","");
//對收集到數據進行驗證
if($_POST){
    //判斷用戶是否進行了數據提交
    $username = isset($_POST["username"])?$_POST["username"]:'';
    if($username==""){
        echo 1;  //response值為1 表示用戶名為空
        exit;
    }
    $password = isset($_POST["password"])?$_POST["password"]:'';
    if($password==""){
        echo 2; //response值為2 表示密碼為空
        exit;
    }
    $email = isset($_POST["email"])?$_POST["email"]:'';
    $phone = isset($_POST["phone"])?$_POST["phone"]:'';
    //將數據放入到數據庫
    $query = "insert into user
             (username,password,email,phone) 
              values 
             (:username,:password,:email,:phone)";
    //PDO通知mysql做准備
    $statm = $pdo->prepare($query);
    //綁定參數
    $statm->bindParam(":username",$username);
    $statm->bindParam(":password",$password);
    $statm->bindParam(":email",$email);
    $statm->bindParam(":phone",$phone);
    //PDOStatement通知mysql執行
    $statm->execute();
    //根據被影響行數，判斷執行是否成功
    if($statm->rowCount()>0){
        //執行成功
        echo 3;
    }else{
        echo 4;//執行失敗
    }
}

這樣就完成了注冊驗證。。。。

需要注意的是：

在給PHP文件傳值的時候用到的 $.('form').serialize(),這個是方法的作用是獲取表單內所有的值；

之前我以為PHP文件中用的是POST，不用傳遞值就可以，但事實上是不行的。

自己的一點小經驗