发送邮箱验证码

发送邮箱验证码与发送短信验证码很像，只是校验的方法不同。

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../layui/css/layui.css" />
	</head>
	<body>
		<form class="layui-form">
			<div class="layui-form-item">
				<label class="layui-form-label">邮箱</label>
				<div class="layui-input-inline">
					<input type="text" name="email" lay-verify="email" id="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">邮箱验证码</label>
				<div class="layui-input-inline">
					<input type="text" name="emailcode" lay-verify="required" placeholder="请输入邮箱验证码" autocomplete="off" class="layui-input">
				</div>
				<div class="layui-input-inline">
					<input id="send-email-code" style="width: 120px;height: 39px;text-align: center;background-color: white;border: 1px solid #E2E2E2" name="send-email-code" type="button"   value="获取验证码"  />
				</div>
			</div>
			<div class="layui-form-item">
				<span id="emailTip"></span>
			</div>
			<div class="layui-form-item">
			    <div class="layui-input-block">
  			    <button class="layui-btn" lay-submit="" id="submit-email-code" >立即提交</button>
            </div>
			</div>
		</form>
		
		<script type="text/javascript" src="../../layui/layui.js" ></script>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script type="text/javascript" src="../../js/user/emailcodeVerify.js" ></script>
		<script>
			layui.use(['form','jquery'],function(){
				var form = layui.form,
				$ = layui.$;
				
	
				
			});
		</script>
	</body>
</html>

var InterValObj; //timer变量，控制时间
var count = 60; //间隔函数，1秒执行
var curCount;//当前剩余秒数
//向邮箱发送验证码
$('#send-email-code').click(function(){
	//校验邮箱
	var email = $("#email").val();
    if(!email.match(/^[a-z0-9]+([._]*[a-z0-9]+)*@[a-z0-9]+([_.][a-z0-9]+)+$/gi)){
        alert("邮箱格式不正确！请重新输入");
        return false;
    }
    
	// 设置button效果，开始计时
	curCount = count;
	document.getElementById("send-email-code").setAttribute("disabled","true" );//设置按钮为禁用状态
	document.getElementById("send-email-code").value=curCount + "秒后重获";//更改按钮文字
	InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器timer处理函数，1秒执行一次
    
    //请求发送验证码
//  $.ajax({
//  	type:"get",
//  	url:"",
//  	async:true,
//  	data:{"email":email},
//  	success:function(obj){
//  		if(){//验证码发送成功
//  			$('#emailTip').html("<font color='#339933'>√ 邮箱验证码已发到您的手机,请查收</font>");
//  		}else if(){
//  			$("#emailTip").html("<font color='red'>× 短信验证码发送失败，请重新发送</font>");
//  		}
//  	},
//  	dataType:"json"
//  });
});

//timer处理函数
function SetRemainTime() {
	if (curCount == 0) {//超时重新获取验证码                
		window.clearInterval(InterValObj);// 停止计时器
		document.getElementById("send-email-code").removeAttribute("disabled");//移除禁用状态改为可用
		document.getElementById("send-email-code").value="重获验证码";
	}else {
		curCount--;
		document.getElementById("send-email-code").value=curCount + "秒后重获";
	}
}

初始界面：

不填写邮箱直接点击提交：

不填写邮箱直接获取验证码：

不填写验证码直接点击提交：

点击获取验证码：

猜你喜欢