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 相关文章推荐
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
jQuery模拟超链接点击效果代码
Apr 21 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
12条写出高质量JS代码的方法
Jan 07 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 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
动态新闻发布的实现及其技巧
2006/10/09 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
python选择排序算法的实现代码
2013/11/21 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
python实现按首字母分类查找功能
2019/10/31 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
法国家具及室内配件店:home24
2017/01/21 全球购物
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
护理目标管理责任书
2014/07/25 职场文书
平安建设汇报材料
2014/12/29 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL