JS实现用户注册时获取短信验证码和倒计时功能


Posted in Javascript onOctober 27, 2016

在用户注册时,通常需要短信验证码,而且为了交互效果,也需要增加倒计时。

效果如下:

JS实现用户注册时获取短信验证码和倒计时功能

<div class="user-form">
<form action="{{ path('zm_member_register') }}" method="post">
<div class="form-list">
<label class="register-label">手机号码</label>
<input class="regphone input-register" type="text" name="phone" placeholder="请输入手机号码" />
</div>
<div class="form-list">
<label class="register-label">验证码</label>
<input class="input-short" type="text" name="sms_salt" placeholder="请输短信验证码" />
<input class="input-code" id="btn" type="button" value="发送验证码" />
</div>
<input style="margin-top: 60px;" type="submit" class="registerSubmit form-sumbit" value="提交" />
</form>
</div>

这里的验证码是通过向后台这个url({{ path(‘zm_member_get_salt') }}))里面,传手机号码和类型(type=1为注册)这两个值,后台接收值成功则返回成功状态值。

基于这里,实现验证码倒计时,即可以在判断成功后。调用封装了的倒计时函数 time(),注意验证码应使用type为button的input,此时可以方便地更改其value值,来展示倒计时的时间。

<script type="text/javascript">
//倒计时60秒
var wait=60;
function time(o) {
if (wait == 0) {
o.removeAttribute("disabled");
o.value="获取动态码";
wait = 60;
} else {
o.setAttribute("disabled", true);
o.value="重新发送(" + wait + ")";
wait--;
setTimeout(function() {
time(o)
}, 1000)
}
}
$('.input-code').click(function() {
var phone = $('.regphone').val();
$.ajax({
type: 'post',
url: "{{ path('zm_member_get_salt') }}",
data: {
phone: phone,
type: 1
},
dataType: 'json',
success: function (result) {
if (result.flag == 1) {
// alert('成功');
time(btn);
} else {
alert(result.content);
}
}
});
});
</script>

以上所述是小编给大家介绍的JS实现用户注册时获取短信验证码和倒计时功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持

Javascript 相关文章推荐
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
Jquery提交表单 Form.js官方插件介绍
Mar 01 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
js判断鼠标移入移出方向的方法
Jun 24 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 #Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 #Javascript
微信小程序  modal弹框组件详解
Oct 27 #Javascript
从0开始学Vue
Oct 27 #Javascript
微信小程序  Mustache语法详细介绍
Oct 27 #Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 #Javascript
JavaScript登录验证码的实现
Oct 27 #Javascript
You might like
php 如何获取数组第一个值
2013/08/06 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
二级域名转向类
2006/11/09 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
javascript模块化简单解析
2016/04/07 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
vue动态注册组件实例代码详解
2019/05/30 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
token 机制和实现方式
2020/12/15 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
python常用排序算法的实现代码
2019/11/08 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
文秘专业个人求职信
2013/12/22 职场文书
幼师自我鉴定
2014/02/01 职场文书
工作所在部门证明
2014/09/21 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技