贴代码之前,我们先讲一下这里我们用到的技术主要有1个。setInterval(),这个方法可以实现倒计时的效果。

css:

.weui_btn_disabled.weui_btn_default {
color: #C9C9C9;
border: 1px solid #C9C9C9;
}

.weui_btn_disabled.weui_btn_default {
  color: #C9C9C9;
}

.weui_btn_plain_primary {
  color: #04BE02;
  border: 1px solid #04BE02;
}

.weui_btn_disabled {
color: rgba(255,255,255,.6);
}

html:

<div class="weui_cell">
<div class="weui_cell_hb">
<label class="weui_label">验证码</label>
</div>
<div class="weui_cell_bd weui_cell_primary">
<input oninput="check_finish()" type="text" placeholder="请输入验证码" class="weui_input <if condition='$vo.is_need eq 1'> is_must</if>" id="code" name="code"/>
</div>
<div class="weui_cell_ft register_code">
<a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_plain_primary" id="get_code_btn" style="display: none;" >发送验证码</a>
</div>
</div>

js:

$('#get_code_btn').click(function(){
var phone = $('#phone').val(); //获取输入的手机号码
if(!$('#get_code_btn').hasClass('weui_btn_default')){ //判断是否有这个class名字
$.Dialog.loading();
var reg_phone = /\d{}/;
if(!reg_phone.test(phone)){ //验证手机是否符合格式
$.Dialog.fail("填写手机号");
return false;
}
$('#get_code_btn').addClass('weui_btn_disabled weui_btn_default');
$('#get_code_btn').removeClass('weui_btn_plain_primary');
$.post(get_code_url,{phone:phone}, //发起请求
function(data){
if(data.result==){
$.Dialog.success("发送成功");
var leftTime = ;
var timer = setInterval(function(){ //倒计时
$('#get_code_btn').text(leftTime+'秒');
leftTime--;
if(leftTime==){ //重新发送
clearInterval(timer);
$('#get_code_btn').removeClass('weui_btn_disabled weui_btn_default').text('重新获取');
$('#get_code_btn').addClass('weui_btn_plain_primary');
}
},);
}else{
$('#get_code_btn').removeClass('weui_btn_disabled weui_btn_default').text('重新获取');
$('#get_code_btn').addClass('weui_btn_plain_primary');
alert(data.msg);
$.Dialog.close();
//$.Dialog.fail(data.msg);
}
}
).error(
function(){ //发送失败
$('#get_code_btn').removeClass('weui_btn_disabled weui_btn_default').text('重新获取');
$('#get_code_btn').addClass('weui_btn_plain_primary');
$.Dialog.fail("系统繁忙");
}
);
}
});

如果大家有更好的方法,大家多多讨论

js手机短信验证的更多相关文章

  1. 如何实现php手机短信验证功能

    http://www.qdexun.cn/jsp/news/shownews.do?method=GetqtnewsdetailAction&id=1677 下载php源代码 现在网站在建设网 ...

  2. ASP.NET MVC 手机短信验证

    本文来自于stoneniqiu的文章,原文地址 http://www.cnblogs.com/stoneniqiu/p/6234002.html 1.注册一个应用 得到AppKey 和 App Sec ...

  3. 完整的Android手机短信验证源码

    短信验证功能我分两个模块来说,短信验证码的后台和代码实现短信验证码的功能. 一.短信验证码的后台      1.注册Mob账号:http://www.mob.com/#/login 2.注册成功之后, ...

  4. js手机短信按钮倒计时

    /*   120秒手机短信按钮倒计时   */    exports.sendmessage = function (name) {        var second = 120; $(name). ...

  5. 利用twilio进行手机短信验证

    首先要注册 twilio 账号但是由于twilio人机验证用的是Goole所有注册需要FQ 完成后去免费获取15元使用 然后 pip install twilio 注册完成后会在个人首页显示你的免费金 ...

  6. 第一次发博,发个简单的Java程序发送手机短信验证

    最近在准备一个项目,想的登录时候用手机验证,就通过上网查阅了一下手机验证的实现方法,原来超级简单,下面将一步一步介绍. 1.去中国网建注册一个账号密码,首次注册送五条免费短信和3条免费彩信.具体的网址 ...

  7. NodeJS 实现手机短信验证 模块阿里大于

    1,NodeJS 安装阿里大于模块 切换到项目目录使用npm 安装阿里于模块 npm i node-alidayu --save 2,aliyu官网使用淘宝账户登录 登录阿里大于 https://do ...

  8. 【转】用JS完成手机短信验证按键点击事件

    原地址:https://gitee.com/RainVanilla/codes/i7jske4wdogvnb0apmfx571 试了一下,效果还可以,留着备用! <!DOCTYPE html&g ...

  9. 融云发送手机短信验证短信(.net版本)

    首先本次需求是在MVC5中进行的,通过收费的融云服务来验证手机号码,而且本次的项目也是前后台分离,所以添加了WEBAPI2,那么先添加WEBAPI的接口 using System; using Sys ...

随机推荐

  1. java操作elasticsearch实现查询删除和查询所有

    后期博客本人都只给出代码,具体的说明在代码中也有注释. 1.查询删除 //查询删除:将查询到的数据进行删除 @Test public void test8() throws UnknownHostEx ...

  2. [福大软工] Z班 第5次成绩排行榜

    作业链接 http://www.cnblogs.com/easteast/p/7613070.html 作业要求 团队项目--选题报告 1)发布博客: 一个团队发布一篇随笔,内容为团队的选题报告,选题 ...

  3. C#基础知识之托管代码和非托管代码

    什么是托管代码(managed code)? 托管代码(Managed Code)就是中间语言(IL)代码,在公共语言运行库(CLR)中运行.编译器把代码编译成中间语言,当方法被调用时,CLR把具体的 ...

  4. sftpdrive mtputty

    https://blog.csdn.net/junli_chen/article/details/77527250?locationNum=2&fps=1

  5. [JS]js中判断变量类型函数typeof的用法汇总[转]

    1.作用: typeof 运算符返回一个用来表示表达式的数据类型的字符串.  可能的字符串有:"number"."string"."boolean&q ...

  6. centos6.5下配置django+uwsgi+nginx

    https://blog.csdn.net/huanbia/article/details/54630180

  7. 经典Python进阶文档 真的很棒

    https://docs.pythontab.com/interpy/args_kwargs/README/

  8. [3] TensorFlow 深层神经网络

    深层神经网络简称为深度学习有两个非常重要的特性1. 多层2. 非线性 线性模型的局限性 :例如前面的神经网络有两层(不算输入层),但是它和单层的神经网络井没有区别,任意线性模型的组合仍然还是线性模型, ...

  9. [tool] google搜索的正确使用姿势(待补全)

    第一,也是非常重要的前提,请一定要能FQ.如果这条没有解决,没有往下的必要 现在我假设你已经能FQ了,个人推荐使用搜索引擎的顺序: Google>微软bing国际搜索>百度 (百度总能给你 ...

  10. p1313计算系数题解

    #include<algorithm> #include<iostream> #include<cstring> #include<cstdio> #i ...