js实现手机验证码发送

来源:互联网 发布:ecmall多用户商城源码 编辑:程序博客网 时间:2024/05/16 03:56

1.通过ajax手机验证码发送实例

2.为了方便用了jquery需要测试时请先导入jquery包


html部分代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="jquery.js" type="text/javascript"></script></head><body>手机号码:<input type="text" name="phone" id="phone"><input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" /><p id='timeshort'></p></body><script type="text/javascript">/*-------------------------------------------*/var after ='';var InterValObj; //timer变量,控制时间var count = 60; //间隔函数,1秒执行var curCount = 60;//当前剩余秒数var exp =new Date();var time;time = exp.getTime();//获取cookie值function getCookie(name){var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");if(arr=document.cookie.match(reg))return unescape(arr[2]);elsereturn null;}//这是有设定过期时间的使用示例: //s20是代表20秒 //h是指小时,如12小时则是:h12 //d是天数,30天则:d30 //设置cookiefunction setCookie(name,value,time){     var strsec = getsec(time);     var exp = new Date();     exp.setTime(exp.getTime() + strsec*1);     document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); } function getsec(str){    // alert(str);    var str1=str.substring(1,str.length)*1;    var str2=str.substring(0,1);    if (str2=="s")   {         return str1*1000;    }   else if (str2=="h")   {        return str1*60*60*1000;    }   else if (str2=="d")   {        return str1*24*60*60*1000;    } } function sendMessage() {if(getCookie('after')>time &&  document.cookie.indexOf('after=') != -1){$('#timeshort').html('请不要在60秒内重复获取验证码');}else{$('#timeshort').html('');}trySend();//调用一次 }function trySend() { if(getCookie('after')<time || document.cookie.indexOf('after=') == -1 || getCookie('after')==null){ //测试时先注释掉ajax请求代码,否则会不成  $.ajax({                        url: "你要请求的路径",                        type: "get",                        dataType: "json",                        data: {'需要传的参数'},                        success: function (data) {                            if (data.code == 0) {                                alert('发送成功');                            } else {                                alert(data.msg);                            }                        },                        error: function () {                        }                    });setCookie("after",time+60*1000,"s60");setCookie("phone",$('#phone').val(),"s60");curCount = count;//设置button效果,开始计时$("#btnSendCode").attr("disabled", "true");$("#btnSendCode").val(curCount + "秒后重新获取");InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次}}//timer处理函数function SetRemainTime() {if (curCount == 0) {               window.clearInterval(InterValObj);//停止计时器$("#btnSendCode").removeAttr("disabled");//启用按钮$("#btnSendCode").val("重新发送验证码");// code = ""; //清除验证码。如果不清除,过时间后,输入收到的验证码依然有效   } else {curCount--;$("#btnSendCode").val(curCount + "秒后重新获取");}}</script></body></html>