体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

老师，填写手机号之后显示检测失败

来源：3-1 总结

weixin_慕先生7015352

2020-09-24 09:31:46

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>用户注册</title>

    <link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body>

    <div class="register">

        <p class="title" id="title">

            <span>登录</span>

            <span class="current">注册</span>

        </p>

        <div class="form">

            <div>

                <span>+86</span>

                <input type="text" name="user" id="user" placeholder="请输入手机号" autocomplete="off"/>

                <i id="user_icon"></i>

                <p class="info" id="user_info"></p>

            </div>

            <div>

                <input type="password" name="pwd" id="pwd" placeholder="请设置密码"/>

                <i id="pwd_icon"></i>

                <p class="info" id="pwd_info"></p>

            </div>

            <p class="button">

                <a href="javascript:void(0)" id="sigup-btn" class="btn show">注册</a>

                <a href="javascript:void(0)" id="login-btn" class="btn">登录</a>

            </p>

        </div>

    </div>

    <script type="text/javascript" src="js/ajax.js"></script>

    <script> 

        var user=document.getElementById('user'),

            pwd=document.getElementById('pwd'),

            sigup=document.getElementById('sigup-btn'),

            login=document.getElementById('login-btn'),

            titles=document.getElementById('title').getElementsByTagName('span'),

            userInfo=document.getElementById("user_info"),

            userIcon=document.getElementById("user_icon")

            pwdInfo=document.getElementById('pwd_info'),

            pwdIcon=document.getElementById('pwd_icon'),

            pwdReg=/^\w{5,12}$/,

            userReg=/^1[3578]\d{9}$/,

            isRepeat=false;  //  记录用户名是否被占用,默认没有被占用

         // 检测用户

        function checkuser(){

            var userVal=user.value;

                

            // 验证手机号码是否有效

            if(!userReg.test(userVal)){

                userInfo.innerHTML="手机号码无效";

                userIcon.className="no";

            }else{

                userInfo.innerHTML="";

                userIcon.className="";

                // 发起请求

                $.ajax({

                    url:"http://localhost/register/server/isUserRepeat.php",

                    // method:"post",

                    // async:true,

                    data:{username:userVal},

                    success:function(data){          

                        if(data.code == 1){

                            userIcon.className = 'ok';

                            isRepeat=false;                

                        }else if(data.code == 0){

                            userIcon.className = 'no';

                            isRepeat = true;

                            userInfo.innerHTML = data.msg;

                        }else{

                            userInfo.innerHTML = '检测失败，请重试...';

                        }

                        // console.log(data);

                    }


                })

            }

        }


        // 检测密码

        function checkpwd(){

            var pwdVal=pwd.value;

            

            if(!pwdReg.test(pwdVal)){

                pwdInfo.innerHTML="请输入5-12位字母数字和下划线";

                pwdIcon.className="no";

            }else{

                pwdInfo.innerHTML="";

                pwdIcon.className="ok";

            }

        }


        // 注册

        function register(){

            var user_val=user.value,

                pwd_val=pwd.value;

            // 如果手机号有效且没有被占用，同时密码合法，方可注册

            if(userReg.test(user_val) && pwdReg.test(pwd_val) && !isRepeat){

                // console.log("ok");

                // 发起请求，实现注册

                $.ajax({

                    url:"http://localhost/register/server/register.php",

                    method:"post",

                    data:{username:user_val,userpwd:pwd_val},

                    success:function(data){

                        alert("注册成功，请登录！");

                        // 调用显示登录界面

                        showLogin();

                        //  清空文本框

                        user.value="";

                        pwd.value="";

                    },

                    error:function(data){

                        pwdInfo.innerHTML="注册失败，请重试！";

                    }

                

                })


            }

        }


        // 显示登录

        function showLogin(){

            //  载入登录界面，登录高亮显示

            titles[0].className="current";

            titles[1].className="";

            login.className="show";

            sigup.className="";

        }


        // 显示注册

        function showsigup(){

            //  载入注册界面，注册高亮显示

            titles[1].className="current";

            titles[0].className="";

            login.className="";

            sigup.className="show";

        }


       // 绑定事件，检测用户的有效性及是否注册过

        user.addEventListener("blur",checkuser,false);  

        // 绑定事件，检测密码的有效性

        pwd.addEventListener("blur",checkpwd,false);          

        // 注册

        sigup.addEventListener("click",register,false);   

        //登录高亮

        titles[0].addEventListener("click",showLogin,false);

        //注册高亮

        titles[1].addEventListener("click",showsigup,false);

    </script>

</body>

</html>


*{

    padding:0;

    margin:0;

}


body{

    background:#333;

}


.register{

    width:300px;

    height:270px;

    margin:80px auto;

    padding:15px 30px;

    background:#eee;

    border-radius:5px;

}


.title{

    height:35px;

}


.title span{

    font-size:16px;

    font-weight:bold;

    color:#666;

    margin-right:30px;

    cursor:pointer;

}


.title span.current{

    color:#f00;

}


.form div{

    width:290px;

    height:30px;

    border-radius:8px;

    background:#fff;

    margin-bottom:25px;

    padding:8px 10px;

    position:relative;

}


.form div span{

    display:inline-block;

    padding-top:5px;

    padding-right:3px;

    color:#666;

}


.form div input{

    border:none;

    outline:none;  /*外边框*/

    font-size:16px;

    color:#666;

    background:none;

}


.form div i{

    position:absolute;

    width:16px;

    height:16px;

    /* background:red; */

    right:12px;

    top:14px;

}


.form div i.ok{

    background:url(../img/icon.png) no-repeat 0 -67px;

}


.form div i.no{

    background:url(../img/icon.png) no-repeat -17px -67px;

}


.form .info{

    margin-top:14px;

    color:#f00;

    padding-left:2px;

}


.form .button{

    padding-top:7px;

}


.button a{

    display:none;

    width: 100%;

    height:45px;

    line-height:45px;

    text-align:center;

    text-decoration:none;

    background:#f20d0d;

    color:#fff;

    border-radius:30px;

    font-size:16px;

}


.button a.show{

    display:block;

}


var $={

    ajax:function(options){

        var xhr=null,  //  XMLHttprequest对象

            url=options.url,  // url地址

            method=options.method || 'get',  //  传输方式，默认为get

            async=typeof(options.async)==='undefined'?true:options.async,             //  若未定义同步还是异步，则值为true,否则为定义的值

            // console.log(method);

            data=options.data || null,

            params="",

            callback=options.success,  //ajax请求成功的回调函数

            error=options.error;

            // 将data的对象字面量形式转换为字符串形式

            if(data){

                for(var i in data){

                    // console.log(i);

                    // console.log(data[i]);

                    params += i+"="+data[i]+"&";                // 传递的参数  

                }

                params=params.replace(/&$/,"");

                // console.log(params);

            }

            if(method==='get'){

                url+='?'+params;

            }

            // console.log(url);

        if(typeof XMLHttpRequest != 'undefined'){

            xhr= new XMLHttpRequest();

        }else if(typeof ActiveXObject != 'undefined'){

            //  将所有可能出现的ActiveXobject版本放在一个数组中

            var xhrArr=['Microsoft.XMLHTTP','MAXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];

            //  遍历创建XMLHttpRequest对象

            var len=xhrArr.length;

            for(var i=0;i<len;i++){

                try{

                    //  创建XMLHttpRequest对象

                    xhr=new ActiveXObject(xhrArr[i]);

                    break;  // 若有一个版本支持则跳出循环

                }

                catch(ex){

                                    //  以上版本均不支持

                }

            }

        }else{

            throw new Error('No XHR object available');

        }


        // 设置响应http请求状态变化的函数

        xhr.onreadystatechange=function(){

            if(xhr.readyState===4){

                if((xhr.status>=200 && xhr.status<300) || xhr.status===304){

                    callback && callback(JSON.parse(xhr.responseText));

                }else{

                    error && error();

                }

            }

        }

        // 创建请求

        xhr.open(method,url,async);

        // 设置post头部信息

        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        //发送请求

        xhr.send(params);

    },

    jsonp:function(){

        

    }

}


<?php 

header('Content-Type:application/json');

$isUsername = array_key_exists('username',$_POST); 

$username = $isUsername ? $_POST['username'] : '';


if(!$username){

    $msg = printMsg('参数有误',2);

    echo json_encode($msg);

    exit();

}


function printMsg($msg,$code){

    return array('msg'=>$msg,'code'=>$code);

}


// 记录存储用户的文件路径

$fileStr = __DIR__.'/user.json';


// 读取现存的用户名和密码


$fileStream = fopen($fileStr,'r');


$fileContent = fread($fileStream,filesize($fileStr));

$fileContent_array = $fileContent ? json_decode($fileContent,true) : array();

fclose($fileStream);

// 判断用户名是否有重复的


$isrepeat = false;


foreach($fileContent_array as $key=>$val){

    if($val['username'] === $username){

        $isrepeat = true;

        break;

    }

}


if($isrepeat){

    $msg = printMsg('用户名重复',0);

    echo json_encode($msg);

    exit();

}

$msg = printMsg('用户名可用',1);

echo json_encode($msg);

?>


<?php 

header('Content-Type:application/json');

// 获取前端传递的注册信息 字段为   username   userpwd

$isUsername = array_key_exists('username',$_POST); 

$isUserpwd = array_key_exists('userpwd',$_POST); 

$username = $isUsername ? $_POST['username'] : '';

$userpwd = $isUserpwd ? $_POST['userpwd'] : '';

function printMsg($msg,$code){

    return array('msg'=>$msg,'code'=>$code);

}


if(!$username || !$userpwd){

    $msg = printMsg('参数有误',0);

    echo json_encode($msg);

    exit();

}


// 记录存储用户的文件路径

$fileStr = __DIR__.'/user.json';


// 读取现存的用户名和密码


$fileStream = fopen($fileStr,'r');


$fileContent = fread($fileStream,filesize($fileStr));

$fileContent_array = $fileContent ? json_decode($fileContent,true) : array();

fclose($fileStream);

// 判断用户名是否有重复的


$isrepeat = false;


foreach($fileContent_array as $key=>$val){

    if($val['username'] === $username){

        $isrepeat = true;

        break;

    }

}


if($isrepeat){

    $msg = printMsg('用户名重复',0);

    echo json_encode($msg);

    exit();

}


array_push($fileContent_array,array('username'=>$username,'userpwd'=>$userpwd));


// 将存储的用户名密码写入

$fileStream = fopen($fileStr,'w');

fwrite($fileStream,json_encode($fileContent_array));

fclose($fileStream);

echo json_encode(printMsg('注册成功',1));

http://img.mukewang.com/climg/5f6bf6b1098cb38713540612.jpg

http://img.mukewang.com/climg/5f6bf6e809e721b406160575.jpg


写回答

1回答

好帮手慕慕子

2020-09-24

同学你好，老师使用源码中的php文件测试同学的代码，效果实现是正确的。

但是使用同学粘贴的php文件测试，效果就是不对的，那就说明是同学的php文件存在问题，由于php不属于前端必备的技能，老师也不是很了解，建议同学直接使用源码提供的php文件再测试一下。

祝学习愉快~

0

0 学习 · 14456 问题

查看课程

相似问题

老师为什么点完注册之后没有弹窗效果以及清空文本框和跳转登录界面的效果呢？

回答 2

老师，我这为什么会显示传入的data为null,然后检测失败

回答 1

老师我写的登陆怎么实现不了？

回答 2

一直显示检测失败，请重试

回答 3

老师，为什么我跟着老师一模一样的代码一行一行写下去，我点击注册永远失败？

回答 2

打开慕课网App查看更多内容