贴代码之前,我们先讲一下这里我们用到的技术主要有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. June 6. 2018 Week 23rd Wednesday

    You are confined only by the walls you build yourself. 限制你的只有你自己筑起的墙. From Andrew Murphy. Let's repe ...

  2. TCP长连接保持连接状态

    对于TCP长连接保活是十分必要的,原因如下: 1.系统多在OA网和外网间有防火墙隔离,很多防火墙对一段时间内没有报文活动的socket会自动关闭. 2.对于非正常断开的连接系统并不能侦测到,比如防火墙 ...

  3. 如何学习sss和前端数据处理

    1.学习scss,就看这篇:http://www.ruanyifeng.com/blog/2012/06/sass.html 就够了,因为sass的出现本来就是为了简化工作提高效率,也不算什么深奥精妙 ...

  4. python之模块与包

    一模块 二包 一模块 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编写的代 ...

  5. Linux之文件属性

    文件属性是什么? [root@luffy_boy-001 /]# ls -lhi /etc/hosts 129822 -rw-r--r--. 2 root root 198 Jan 11 2019 / ...

  6. SQL Alias(别名)

    通过使用 SQL,可以为列名称和表名称指定别名(Alias). SQL Alias 表的 SQL Alias 语法 SELECT column_name(s) FROM table_name AS a ...

  7. P1553 数字反转(升级版)(模拟)

    花了2个小时,写的..mmp只想说,还是我太菜了. #include<iostream> #include<cstring> using namespace std; ]; i ...

  8. tomcat (选号)公司tomcat无页面解决

    问:我现在的有的解决方法就是把上一次war包下下载下来,在重启tomcat 答:那不行,更新war包就没有意义了,你都没排查故障  就直接说war包少东西?主页都没有..还能少主页也不是404.war ...

  9. openjdk8源码编译

    1. 安装源码管理工具 yum install mercurial 2. 下载源码 hg clone http://hg.openjdk.java.net/jdk8u/jdk8u jdk8u #执行源 ...

  10. Unity编辑器:基于NGUI的引用检测工具

    这里共享一个基于NGUI的引用检测工具.工具包括几个部分:Atlas/Sprite的引用查找:字库引用查找:UITexture引用查找:Component查找: 代码就不多介绍了,文章底部提供源码下载 ...