体系课

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

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

来源：2-10 脚本

weixin_慕先生7015352

2020-09-23 16:21:36

<!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/AJAX/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/AJAX/register/server/register.php",

                    method:"post",

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

                    success:function(data){

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

                        // 调用显示登录界面

                        showLogin();

                        //  清空文本框

                        user.value="";

                        pwd.vaue="";

                    },

                    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>


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.readystatechange=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(){

        

    }

}


*{

    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:16px;

    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;

}


写回答

2回答

好帮手慕久久

2020-09-24

同学你好，很抱歉，老师再测测试后，还是可以正确验证的，无法出现同学的错误提示：

http://img1.sycdn.imooc.com/climg/5f6bf37f09a9c00104640202.jpg

建议同学新建一个问题，把所有的代码粘贴出来，再把错误截图粘贴出来，然后把控制台netWork的状态也发出来一下，如下：

http://img1.sycdn.imooc.com/climg/5f6bf3df096a96ee07950409.jpg

这样方便老师定位问题。

祝学习愉快！

0

好帮手慕久久

2020-09-23

同学你好，代码中存在书写错误，导致效果不对，如下：

  1. "onreadystatechange"事件单词写错了，修改如下：

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

  2. register方法中，清空密码框内容时，value单词写错了，修改如下：

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

如果我的回答帮到了你，欢迎采纳，祝学习愉快！

0
heixin_慕先生7015352
h 老师，改完之后，为什么输入手机号码显示检测失败啊？
h020-09-24
共1条回复

0 学习 · 14456 问题

查看课程

相似问题

关于register函数，为什么要再一次的test？

回答 2

老师报错了

回答 6

代码就会中断在send(params)这了，要点击继续的小三角号才会显示右边绿色的打钩

回答 2

请问怎样清除浏览器缓存，改了css文件后刷新无效，加meta标签，css加版本号报错找不到该文件

回答 2

老师看看什么问题,实现不了登录的

回答 1

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