手机短信验证码 -- 云通讯

最新推荐文章于 2024-06-08 17:04:18 发布

原创

最新推荐文章于 2024-06-08 17:04:18 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何使用云通讯服务，如‘容联云通讯’，来实现手机短信验证码的发送、倒计时功能以及验证码的验证。讲解了从前端jsp和js的交互，包括onclick事件触发发送验证码和倒计时函数，到后台的Controller层处理，最后进行验证码的正确性检查。整个流程涵盖了前后端的交互和短信验证逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

手机短信验证码 – 云通讯

包括手机验证码的发送还有点击后倒计时及验证码的验证包括验证码是否输入正确和是否在规定时间间内
jsp

<input onclick="settime(this);"  type="button"  value="获取验证码" style="width: 53%;height: 30px;background: #beaca4;;text-align:center;padding-right: 1px;"><br>

在这里插入图片描述

<script language="javascript" type="text/javascript">
//发送验证码
function settime(val) {
	var phone = $('#phone').val();
	var myreg="/(^\d{15}$)|(^\d{17}(x|X|\d)$)/";
	   if (phone == null || phone == '') {
	    	top.layer.msg("手机号不能为空！", {icon: 5});
       }else{
   		$.ajax({
   			type:"post",
   			url:"xxx/xxx.do",
   			dataType:"json",
   			data:{ "phone":phone },
   			success:function(msg){
   				if(msg.code == 1){
   					top.layer.msg("验证码发送成功！", {icon: 6});
   				}else{
 						top.layer.msg(msg.msg, {icon: 5});
 				}
   			}
   		})
       	time(val);
       }
} 
//倒计时
var countdown = 60;
function time(val) {
	if (countdown == 0) {
		val.removeAttribute("disabled");
		val.value = "获取验证码";
		countdown = 60;
		return false;
	} else {
		val.setAttribute("disabled", true);
		val.value = "重新发送(" + countdown + ")";
		countdown--;
	}
	setTimeout(function() {
		time(val);
	}