100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > jQuery 前端实现手机验证码

jQuery 前端实现手机验证码

时间:2019-08-10 21:11:37

相关推荐

jQuery 前端实现手机验证码

html

<input id="phone" type="text" name="phone"><input id="checkCode" type="text" name="code"><button id="code-btn">点击发送验证码</button>

js代码

var code = ""; //接收验证码 $('#code-btn').click(function(){var count = 5;var phone=$("#phone").val();//手机号码 var reg_phone = /1\d{10}/;if(!reg_phone.test(phone)){ //验证手机是否符合格式alert("填写手机号");return false;} //开始计时 $("#code-btn").attr('disabled','disabled'); $("#code-btn").html("倒计时" + count + "秒"); var timer = setInterval(function(){ count--;$("#code-btn").html("倒计时" + count + "秒"); if (count==0) {clearInterval(timer);$("#code-btn").attr("disabled",false);//启用按钮 $("#code-btn").html("重新发送验证码");code = "";//清除验证码。如果不清除,过时间后,输入收到的验证码依然有效 }},1000);//向后台发送处理数据 $.ajax({ type: "POST", //用POST方式传输 dataType: "text", //数据格式:JSON url: '', //目标地址 data: "phone=" + phone + "&code=" + code, error: function (XMLHttpRequest, textStatus, errorThrown) { }, success: function (msg){ } });});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。