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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Register</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="register">
<p class="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">注 册</a>
</p>
</div>
</div>
<script src="script/ajax.js"></script>
<script>
var user = document.getElementById('user'),
pwd = document.getElementById('pwd'),
sigup = document.getElementById('sigup-btn'),
userInfo = document.getElementById('user_info'),
userIcon = document.getElementById('user_icon'),
pwdInfo = document.getElementById('pwd_info'),
pwdIcon = document.getElementById('pwd_icon'),
userReg = /^1[34578]\d{9}$/,
pwdReg = /^\w{5,12}$/,
isRepeat = false;//记录用户名是否被占用了

//检测用户
function checkUser(){
var userVal = user.value;
if(!userReg.test(userVal)){
userInfo.innerHTML = '手机号码无效!';
userIcon.className = 'no';
}else{
userInfo.innerHTML = '';
userIcon.className = '';
//发起ajax请求
$.ajax({
url:'http://localhost/register-demo/server/isUserRepeat.php',
method:'get',
async:true,
data:{username:userVal},
success:function(data){
userIcon.className = 'ok';
isRepeat = false;
if(data.code == 1){
userIcon.className = 'ok';
}else if(data.code == 0){
userIcon.className = 'no';
isRepeat = true;
userInfo.innerHTML = data.msg;
}else{
userInfo.innerHTML = '检测失败,请重试...';
}
}
})
}
}

//检测密码
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 ){
//发起ajax请求实现注册
$.ajax({
url:'http://localhost/server/register.php',
method:'post',
data:{username:user_val,userpwd:pwd_val},
success:function(data){
console.log(data);
alert('注册成功,请登录!');
user.value = '';
pwd.value = '';
},
error:function(){
pwdInfo.innerHTML = '注册失败,请重试!';
}
})
}
}

//绑定事件,检测用户的有效性以及是否注册过
user.addEventListener('blur',checkUser,false);

//检测密码的有效性
pwd.addEventListener('blur',checkPwd,false);

//注册
sigup.addEventListener('click',register,false);
</script>
</body>
</html>

下面是ajax.js,我的都在本地服务器运行的,server也拷贝了,url也引用成功

var $ = {
	ajax:function(options){
		var xhr = null,//XMLHttpRequest对象
			url = options.url,
			method = options.method || 'get',//默认为get,前面没有的话是undefined
			async = typeof (options.async) === 'undefined'?true:options.async,//不能像method一样||或判断,因为如果用户设置是false,fasle||ture还是ture.
			data = options.data||null,//post--send(data转换字符串)  send(null)--get  			
			params = '',//传递的参数
			callback = options.success,//ajax倾城成功的回调函数
			error = options.error;
			//将data的对象字面量的形式转换为字符串形式
			if(data){
				for(var i in data){
					params += i + '=' + data[i] + '&';
				}
				params = params.replace(/&$/,'');
			}
			//根据method的值改变url
			if(method === 'get'){
				url += '?'+params;
			}
		if (typeof XMLHttpRequest != "undefined") {
			xhr = new XMLHttpRequest();
		} else if (typeof ActiveXObject != "undefined") {
              //将所有可能出现的ActiveXObject版本放在一个数组中
              var xhrArr = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
              //遍历创建XMLHttpRequest对象
              var len = xhrArr.length;
              for (var i=0;i<len;i++)
              {
              	try
              	{
                      //创建XMLHttpRequest对象
                      xhr = new ActiveXObject(xhrArr[i]);
                      //如果创建XMLHttpRequest对象成功,则跳出循环
                      break;
                  }
                  catch(ex)
                  {
                  }
              }
          } else {
          	throw new Error("No XHR object available.");
          }//第一步截止目前完成  创建XMLHttpRequest对象
          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();
          		}
          	}
          }
          //第二步开始创建和发送HTTP请求
          xhr.open(method,url,async);
          xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
          xhr.send(params);	
	}, 
}//模仿jQuery的方法ajax

还有一问题就是为什么打开F12控制台运行的时候,刚填完手机号码,代码就会中断在send(params)这了,要点击继续的小三角号才会显示右边绿色的打钩

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕慕子 2019-12-12 10:43:16

同学你好,这个问题是自己已经解决了吗?如果不是的话,可以将你的css文件也粘贴过来,便于老师帮助同学准确的定位与解决问题。祝学习愉快~

  • 提问者 RahodJoe #1
    老师代码的问题解决了,还有一个问题就是还有一问题就是为什么打开F12控制台运行网页的时候,刚填完手机号码,代码就会中断在send(params)这了,要点击继续的小三角号才会显示右边绿色的打钩,除非关闭F12开发者工具,它才会不中断的运行所有事件,能明白我的意思嘛,不明白我再上截图
    2019-12-12 10:45:16
  • 好帮手慕慕子 回复 提问者 RahodJoe #2
    同学你好,不是很清楚同学具体指的是什么情况, 同学可以截图过来,便于老师帮助你准确的定位与解决问题,祝学习愉快~
    2019-12-12 11:34:26
  • 提问者 RahodJoe 回复 好帮手慕慕子 #3
    lao老师我已经提交了新的提问并且附上截图
    2019-12-13 09:48:41
提问者 RahodJoe 2019-12-12 01:02:37

同学你好,自己粗心了哦,localhost后面漏了register-demo哦

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师