jquery注册表单验证提交,手机验证码倒计时

在这里插入图片描述

        <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()  //刷新页面
					
				}
			}
		})
    })
})
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值