reg.html

<h3>普通用户注册</h3>
    <!-- 创建标签 -->
        <form>
            用户名称：<input type="text" value="" id="u_names" placeholder="请输入用户名"><br>
            <span id="msg" style="color: red;"></span><br>
            手机号：<input type="text" value="" id="u_phone" placeholder="请输入手机号"><br>
            <br>
            会员：<input type="text" id="u_member" placeholder="是否为会员"><br>
            <!-- <span id="tip" style="color: crimson;"></span> -->
            <input type="button" id="btn" value="注册"><br>
            
        </form>
        <!-- js 验证表单内容 -->
        <script>
        btn.οnclick=function(){            //验证表单参数名不能为空则停止
            console.log(1);
            if(u_names.value==""){
                alert("用户名不能为空");
                return;
            }
            if(u_phone.value==""){
                alert("用户电话不能为空");
                return;
            }
            if(u_member.value==""){
                alert("会员不能为空");
                return;
            }            
            console.log(2);
    
     // 发送ajax获取服务器结果 
            // 创建xhr对象
            var xhr=new XMLHttpRequest();
            // 打开网络连接
            var url="http://127.0.0.1:3000/user/reg";
            xhr.open("POST",url,true);
            console.log(3);
            // 修改数据请求类型
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            console.log(4);
            // 发送数据    aname=tom&apwd=123 类型
            var str=`u_names=${u_names.value}&u_phone=${u_phone.value}&u_member=${u_member.value}`;
            console.log(str);
            console.log(5);
            xhr.send(str);
            // 接受服务器返回
            xhr.onreadystatechange=function(){
                if(xhr.readyState===4 && xhr.status===200){
                    // json 转换为js对象
                    var obj=JSON.parse(xhr.responseText);
                    if(obj.code===1){
                            //alert(obj.msg);
                            // 如果注册成功跳转edit.html
                            // 创建变量保存字符串url
                    var url="edit.html";
                    url+="?uphone="+u_phone.value;
                    url+="&umember="+u_member.value;
                    url+="&unames="+u_names.value;
                    console.log(100);
                    console.log(url);
                            // 自动跳转
                            location.href=url;
                         }else{
                          //alert(obj.msg);
                    }
                    
                }
                
                
            }
            
        }
        // 失去焦点事件
        // 获取手机输入框并绑定onblue 失去焦点
        u_phone.οnblur=function(){    
            console.log(123);    
        }
        
        // 禁用按钮
        // btn.disabled=true;  
        // 允许使用
        // btn.disabled=false;
        // 禁用按钮（当用户页面打开时禁用）
        btn.disabled=true;
        // 为手机号输入框加事件onblur
        u_phone.οnblur=function(){
            if(u_phone.value==""){
                alert("用户手机号不能为空");
                return;
            }    
        // 创建对象
        var xhr=new XMLHttpRequest();
        // 创建变量url指定服务器地址
        var url=`http://127.0.0.1:3000/user/exists?u_phone=${u_phone.value}`;
        // 打开网络连接 open
        xhr.open("GET",url,true);
        // 发送请求
        xhr.send();
    
        // 接收服务器返回数据
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4 && xhr.status==200){
                // json 转换为js对象
                var obj=JSON.parse(xhr.responseText);
                console.log(obj)
                // 如果手机号可用 btn.disabled=false; 启用
                   if(obj.code==1){
                  msg.innerHTML=obj.msg;
                  btn.disabled=false;
                }else{
                  msg.innerHTML=obj.msg;
                   btn.disabled=true;
                }
                
            }
                
        }
        
    }
        
        </script>