<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);
}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>
