js实现通过手机号发送验证码功能

最新推荐文章于 2023-11-01 22:48:28 发布

zuo_zuo_blog

最新推荐文章于 2023-11-01 22:48:28 发布

阅读量2.5k

点赞数

分类专栏：ＪａｖａＳｃｒｉｐｔ

本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/103582469

版权

ＪａｖａＳｃｒｉｐｔ专栏收录该内容

105 篇文章 2 订阅

订阅专栏

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>发送验证码</title>
<style>
.contain{
width:300px;
height:200px;
margin:100px auto;
background-color:blue;
}
#phone{
width:190px;
margin-top:60px;
}
#verCode{
width:103px;
}
</style>
</head>
<body>
<div class="contain" >
手机号：<input type="text" name="phone" id="phone"  placeholder="请输入手机号" maxlength="11" /><br /><br />
验证码：<input type="" name="verCode" id="verCode"  placeholder="请输入验证码" maxlength="6"/>
<input type="button" name="" id="verCodeBtn" value="获取验证码" onclick="settime(this);"/>
</div>

<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script>
//验证码
var counts = 60;
function settime(val) {
 if(counts == 0) {
  val.removeAttribute("disabled");
  val.value = "获取验证码";
  counts = 60;
  return false;
 } else {
  val.setAttribute("disabled", true);
  val.value = "重新发送（" + counts + "）";
  counts--;
 }
 setTimeout(function() {
  settime(val);
 }, 1000);
}

 //获取验证码
$(function(){
 $("#verCodeBtn").click(function() {
  var userinfo = {
   "UserPhoneNum": '86//' + $("input[name='phone']").val()
  }
  $.ajax({
   url: "https://www.xxxxx.cn/user/sendcode/",
   data: userinfo,
   type: "get",
   success: function(data) {
    if(JSON.parse(data).state === 404 || JSON.parse(data).state === 202 || userinfo.UserPhoneNum === '86//') {
     alert("验证码发送失败")
    } else {
     alert("验证码发送成功，请耐心等待")
    }
   },
   error: function() {
    alert("发送失败");
   }
  });
 });
})
</script>
</body>
<

/html>

zuo_zuo_blog

关注

0
点赞
踩
15

收藏

觉得还不错? 一键收藏
4
评论
js实现通过手机号发送验证码功能

代码如下：<!DOCTYPE html><html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>发送验证码</title><style>.contain{width:300px...
复制链接

扫一扫