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，不用传递值就可以，但事实上是不行的。

自己的一点小经验

 

转载于:https://www.cnblogs.com/yuanwanli/p/5921160.html