![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/603c455f943ad26dd761f79361587f69.png)
<div class="con">
<div class="con5">
<input type="text" id="user_mobile" placeholder="请输入您的手机号">
<span>+86</span>
</div>
<div class="con6">
<input type="text" id="mobileCheckCode" placeholder="请输入您的验证码">
<img src="img/r_password.png" alt="">
<span class="send">发送验证码</span>
<span class="hidden"></span><!-- 防止重复点击 与.send标签同一位置 -->
</div>
<div class="con7">
<input type="password" id="user_password" placeholder="请输入您的密码">
<img src="img/r_password.png" alt="">
<div class="look">*密码由6-20位字母、字符或数字组成</div>
</div>
<div class="con8">注册</div>
</div>
<div id="error_info"></div><!-- 提示弹框 默认隐藏 -->
$(function(){
var u_phone = ''; //发送的验证码,全局定义,提交时需要核对验证码是否正确
$(".send").click(function(){ //点击发送验证码
var user_mobile=$("#user_mobile").val().replace(/(^\s*)|(\s*$)/g, "");//去除左右两边的空白字符 用户输入的验证码
if(user_mobile==""){
$("#error_info").text("请填写手机号!"); //提示框
$("#error_info").show().delay(1000).hide(100); //提示框停留1s隐藏
return;
}
var mobileReg=/^[1][3,4,5,7,8,9][0-9]{9}$/;
if(!mobileReg.test(user_mobile)){
$("#error_info").text("手机号格式不正确!");
$("#error_info").show().delay(1000).hide(100);
return;
}
//倒计时
$(".send").hide()
$(".hidden").show() //防止重复点击
var second = 60;
$(".hidden").text((second) + "秒")
var interval = setInterval(function () {
second--
$(".hidden").text((second) + "秒")
if (second === -1) {
$(".send").text("重发验证码")
clearInterval(interval)
$(".hidden").hide()
$(".send").show()
}
}, 1000)
$.ajax({
type: "POST",
url: "/user/mobile/code",
data: {
user_phone:$("#user_mobile").val()
},
success: function(res){
u_phone = res.code.replace(/\"/g, "") //得到发送的验证码
console.log("发送的验证码"+u_phone);
}
})
})
$(".con8").on("click",function(){ //点击提交
var user_mobile=$("#user_mobile").val().replace(/(^\s*)|(\s*$)/g, "");//去除左右两边的空白字符 验证码
var user_password=$("#user_password").val().replace(/(^\s*)|(\s*$)/g, ""); //用户输入的密码
var mobileCheckCode=$("#mobileCheckCode").val().replace(/(^\s*)|(\s*$)/g, ""); //用户输入的验证码
if(user_mobile==""||user_password==""||mobileCheckCode==""){
$("#error_info").text("请填写完整!");
$("#error_info").show().delay(1000).hide(100);
return;
}
var mobileReg=/^[1][3,4,5,7,8,9][0-9]{9}$/;
if(!mobileReg.test(user_mobile)){
$("#error_info").text("手机号格式不正确!");
$("#error_info").show().delay(1000).hide(100);
return;
}
if(user_password.length<6||user_password.length>20){
$("#error_info").text("密码格式不正确!");
$("#error_info").show().delay(1000).hide(100);
return;
}
if(mobileCheckCode != u_phone){ //用户输入的验证码 不等于 发送的验证码
$("#error_info").text("验证码不正确!");
$("#error_info").show().delay(1000).hide(100);
$("#mobileCheckCode").val("")
return;
}
$.ajax({
type: "POST",
url: "/user/save",
data: {
phone: $("#user_mobile").val(),
password: $("#user_password").val()
},
success: function(res){
console.log(res.code);
var code = res.code;
if(code==0){
$("#error_info").text("注册成功");
$("#error_info").show().delay(1000).hide(100);
setTimeout('location.href="download.html"',2000); //2s后跳转页面
}else{
console.log(res.msg);
$("#error_info").text(res.msg);
$("#error_info").show().delay(1000).hide(100);
window.location.reload() //刷新页面
}
}
})
})
})