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 相关文章推荐
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
javascript常用功能汇总
Jul 05 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
微信小程序自定义弹出层效果
May 26 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 Javascript
Vue详细的入门笔记
May 10 Vue.js
微信小程序 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代码实现爬虫记录――超管用
2015/07/31 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
python集合用法实例分析
2015/05/30 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
Julep官网:美容产品和指甲油
2017/02/25 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
求职简历自荐信范文
2013/10/21 职场文书
毕业生自荐信
2013/12/14 职场文书
物业管理计划书
2014/01/10 职场文书
致接力运动员广播稿
2014/02/17 职场文书
人事部岗位职责范本
2014/03/05 职场文书
行政处罚告知书
2015/07/01 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
关于Vue中的options选项
2022/03/22 Vue.js