DDR爱好者之家

JS实现用户注册时获取短信验证码和倒计时功能
站长资源 2026/9/2 佚名
45 1538
DDR爱好者之家 Design By 杰米

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

效果如下：

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实现用户注册时获取短信验证码和倒计时功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米