js手机短信验证
贴代码之前,我们先讲一下这里我们用到的技术主要有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手机短信验证的更多相关文章
- 如何实现php手机短信验证功能
http://www.qdexun.cn/jsp/news/shownews.do?method=GetqtnewsdetailAction&id=1677 下载php源代码 现在网站在建设网 ...
- ASP.NET MVC 手机短信验证
本文来自于stoneniqiu的文章,原文地址 http://www.cnblogs.com/stoneniqiu/p/6234002.html 1.注册一个应用 得到AppKey 和 App Sec ...
- 完整的Android手机短信验证源码
短信验证功能我分两个模块来说,短信验证码的后台和代码实现短信验证码的功能. 一.短信验证码的后台 1.注册Mob账号:http://www.mob.com/#/login 2.注册成功之后, ...
- js手机短信按钮倒计时
/* 120秒手机短信按钮倒计时 */ exports.sendmessage = function (name) { var second = 120; $(name). ...
- 利用twilio进行手机短信验证
首先要注册 twilio 账号但是由于twilio人机验证用的是Goole所有注册需要FQ 完成后去免费获取15元使用 然后 pip install twilio 注册完成后会在个人首页显示你的免费金 ...
- 第一次发博,发个简单的Java程序发送手机短信验证
最近在准备一个项目,想的登录时候用手机验证,就通过上网查阅了一下手机验证的实现方法,原来超级简单,下面将一步一步介绍. 1.去中国网建注册一个账号密码,首次注册送五条免费短信和3条免费彩信.具体的网址 ...
- NodeJS 实现手机短信验证 模块阿里大于
1,NodeJS 安装阿里大于模块 切换到项目目录使用npm 安装阿里于模块 npm i node-alidayu --save 2,aliyu官网使用淘宝账户登录 登录阿里大于 https://do ...
- 【转】用JS完成手机短信验证按键点击事件
原地址:https://gitee.com/RainVanilla/codes/i7jske4wdogvnb0apmfx571 试了一下,效果还可以,留着备用! <!DOCTYPE html&g ...
- 融云发送手机短信验证短信(.net版本)
首先本次需求是在MVC5中进行的,通过收费的融云服务来验证手机号码,而且本次的项目也是前后台分离,所以添加了WEBAPI2,那么先添加WEBAPI的接口 using System; using Sys ...
随机推荐
- June 6. 2018 Week 23rd Wednesday
You are confined only by the walls you build yourself. 限制你的只有你自己筑起的墙. From Andrew Murphy. Let's repe ...
- TCP长连接保持连接状态
对于TCP长连接保活是十分必要的,原因如下: 1.系统多在OA网和外网间有防火墙隔离,很多防火墙对一段时间内没有报文活动的socket会自动关闭. 2.对于非正常断开的连接系统并不能侦测到,比如防火墙 ...
- 如何学习sss和前端数据处理
1.学习scss,就看这篇:http://www.ruanyifeng.com/blog/2012/06/sass.html 就够了,因为sass的出现本来就是为了简化工作提高效率,也不算什么深奥精妙 ...
- python之模块与包
一模块 二包 一模块 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编写的代 ...
- Linux之文件属性
文件属性是什么? [root@luffy_boy-001 /]# ls -lhi /etc/hosts 129822 -rw-r--r--. 2 root root 198 Jan 11 2019 / ...
- SQL Alias(别名)
通过使用 SQL,可以为列名称和表名称指定别名(Alias). SQL Alias 表的 SQL Alias 语法 SELECT column_name(s) FROM table_name AS a ...
- P1553 数字反转(升级版)(模拟)
花了2个小时,写的..mmp只想说,还是我太菜了. #include<iostream> #include<cstring> using namespace std; ]; i ...
- tomcat (选号)公司tomcat无页面解决
问:我现在的有的解决方法就是把上一次war包下下载下来,在重启tomcat 答:那不行,更新war包就没有意义了,你都没排查故障 就直接说war包少东西?主页都没有..还能少主页也不是404.war ...
- openjdk8源码编译
1. 安装源码管理工具 yum install mercurial 2. 下载源码 hg clone http://hg.openjdk.java.net/jdk8u/jdk8u jdk8u #执行源 ...
- Unity编辑器:基于NGUI的引用检测工具
这里共享一个基于NGUI的引用检测工具.工具包括几个部分:Atlas/Sprite的引用查找:字库引用查找:UITexture引用查找:Component查找: 代码就不多介绍了,文章底部提供源码下载 ...