小程序输入手机号并点击获取验证码

最新推荐文章于 2025-07-01 20:00:47 发布

小彡朱

最新推荐文章于 2025-07-01 20:00:47 发布

阅读量1.1w

点赞数

本文详细介绍了在微信小程序中实现验证码功能的过程，包括获取手机输入值、验证手机号格式、发送验证码及倒计时功能。通过具体代码展示了如何使用wx.showToast进行提示，以及如何设置按钮的禁用状态和颜色。

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

views.wxml
在这里插入图片描述

views.js

Page({
data: {
text: ‘获取验证码’, //按钮文字
currentTime: 61, //倒计时
disabled: false, //按钮是否禁用
phone: ‘’ //获取到的手机栏中的值

},
//获取手机栏input中的值
phoneInput: function (e) {
this.setData({
phone: e.detail.value
})
},
//获取验证码按钮
bindButtonTap: function () {
var that = this;

that.setData({
  disabled: true, 
  color: '#ccc',
})

var phone = that.data.phone;
var currentTime = that.data.currentTime //把手机号跟倒计时值变例成js值

var warn = null; //warn为当手机号为空或格式不正确时提示用户的文字，默认为空

if (phone == '') {
  warn = "号码不能为空";
} else if (phone.trim().length != 11 || ! /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/.test(phone)) {
  warn = "手机号格式不正确";
} else {
  //当手机号正确的时候提示用户短信验证码已经发送
  wx.showToast({
    title: '短信验证码已发送',
    icon: 'none',
    duration: 2000
  });

  //设置一分钟的倒计时
  var interval = setInterval(function () {
    currentTime--; //每执行一次让倒计时秒数减一
    that.setData({
      text: currentTime + 's', //按钮文字变成倒计时对应秒数

    })
    //如果当秒数小于等于0时 停止计时器 且按钮文字变成重新发送 且按钮变成可用状态 倒计时的秒数也要恢复成默认秒数 即让获取验证码的按钮恢复到初始化状态只改变按钮文字
    if (currentTime <= 0) {
    ?clearInterval(interval)
      that.setData({
        text: '重新发送',
        currentTime: 61,
        disabled: false,
        color: '#59b550'
      })
    }
  }, 1000);

};

//判断 当提示错误信息文字不为空 即手机号输入有问题时提示用户错误信息 并且提示完之后一定要让按钮为可用状态 因为点击按钮时设置了只要点击了按钮就让按钮禁用的情况
if (warn != null) {
  wx.showModal({
    title: '提示',
    content: warn
  })

  that.setData({
    disabled: false,
    color: '#59b550'
  })
  return;

};

/**

生命周期函数–监听页面加载
*/
onLoad: function (options) {

})

views.css

page{
font-size: 30rpx;
}

.left{ float: left}
.right{float: right}

.info_list {
height: 103rpx;
line-height: 103rpx;
width: 80%;
border-bottom: 1px solid #bcbcbd;
padding-left: 24rpx;
display: inline-block;
font-size: 33rpx;
margin-left: 10%;
}

.shouji_info input {
margin-top: 25rpx;
}

.yanzheng_btn {
width: 207rpx;
background: #59b550;
margin-right: 20rpx;
height: 82rpx;
margin-top: 12rpx;
text-align: center;
line-height: 82rpx;
border-radius: 15rpx;
color: #fff;
font-size: 33rpx;
padding: 0 10rpx;
}