JQuery+Ajax实现唯一性验证、正则

tp5控制器

//唯一性验证
    public function Only(){
        //实例化模型层
        $model = new User();
        $res = $model->Only();
        echo $res;
    }

tp5模型层

public function Only(){
        //接收传值
        $uname = Request::instance()->param('username');
        return $this->where("uname='$uname'")->count();
    }

html页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<form action="" method="post" onsubmit="return fun();">
    <table>
        <tr>
            <td>账号</td>
            <td>
                <input type="text" name="username" id="username" placeholder="A-Z开头，由字母数字下划线组成，最少6位" size="35px;" onblur="fun1();">
                <span id="s1"></span>
            </td>
        </tr>
        <tr>
            <td>密码</td>
            <td>
                <input type="password" name="pwd" id="pwd" placeholder="数字开头，由数字、字母组成，最少6位" size="35px;" onblur="fun2();">
                <span id="s2"></span>
            </td>
        </tr>
        <tr>
            <td>确认密码</td>
            <td>
                <input type="password" name="rpwd" id="rpwd" placeholder="保证密码一致" onblur="fun3();">
                <span id="s3"></span>
            </td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex" value="1">男
                <input type="radio" name="sex" value="2">女
                <span id="s4"></span>
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="注册"></td>
        </tr>
    </table>
</form>
<script src="__STATIC__/js/jquery.js"></script>
<script>
    //定义全局变量
    var flag = false;

    function fun(){
        if(fun1()  && fun2() && fun3() && fun4()){
            return true;
        }else{
            return false;
        }
    }

    function fun1(){
        var username = $("#username").val();
        var reg = /^[A-Z]\w{5,}$/;
        if(username==''){
            $("#s1").html("<font color='red'>账号不能为空</font>");
            return false;
        }else{
            if(reg.test(username)){
                // $("#s1").html("<font color='green'>✔</font>");
                // return true;
                $.get("{:url('One/Only')}?username="+username,function(data){
                    if(data>0){
                        $("#s1").html("<font color='red'>账号已经存在</font>");
                        flag = false;
                        
                    }else{
                        $("#s1").html("<font color='green'>✔</font>");
                        flag = true;
                    }
                    
                })
                return flag;
                
            }else{
                $("#s1").html("<font color='blue'>A-Z开头，由字母数字下划线组成，最少6位</font>");
                    return false;
            }
        }
    }

    // function fun5(){
    //     var username = $("#username").val();
    //     var flag = true;
    //     $.get("{:url('One/Only')}?username="+username,function(data){
    //         if(data>0){
    //             $("#s1").html("<font color='red'>账号已经存在</font>");
    //             flag = false;
    //         }else{
    //             $("#s1").html("<font color='green'>✔</font>");
    //             flag = true;
    //         }
    //     })

    //     return flag;
    // }


    function fun2(){
        var pwd = $("#pwd").val();
        var reg = /^\d[A-Z0-9]{5,}$/i;
        if(pwd == ''){
            $("#s2").html("<font color='red'>密码不能为空</font>");
            return false;
        }else{
            if(reg.test(pwd)){
                $("#s2").html("<font color='green'>✔</font>");
                return true;
            }else{
                $("#s2").html("<font color='blue'>数字开头，由数字、字母组成，最少6位</font>");
                return false;
            }
        }

    }

    function fun3(){
        var pwd = $("#pwd").val();
        var rpwd = $("#rpwd").val();
        if(pwd==rpwd){
            $("#s3").html("<font color='green'>✔</font>");
            return true;
        }else{
            $("#s3").html("<font color='red'>密码不一致</font>");
            return false;
        }
    }

    function fun4(){
        var sex = document.getElementsByName('sex');
        if(sex[0].checked==true || sex[1].checked==true){
            $("#s4").html("<font color='green'>✔</font>");
            return true;
        }else{
            $("#s4").html("<font color='blue'>最少选择一项</font>");
            return false;
        }
    }
</script>
</body>
</html>

JQuery+Ajax实现唯一性验证、正则

猜你喜欢