前端小程序手机验证码示例代码

前端小程序中发送手机号验证码通常涉及到异步请求和处理用户输入验证的过程。以下是一个基本的微信小程序获取并显示验证码的示例代码：

<view class="code-input">
  <input type="tel" placeholder="请输入手机号" bindInput="handlePhoneInput" />
  <button open-type="getPhoneNumber" bindgetphonenumber="sendCode">获取验证码</button>
  <text>{{showCode}}</text> <!-- 显示验证码 -->
</view>

<script>
Page({
  data: {
    phone: '',
    code: '',
    showCode: '点击获取',
    // 其他配置如请求接口等...
  },
  
  handlePhoneInput(e) {
    this.setData({ phone: e.detail.value });
  },
  
  sendCode(event) {
    if (!this.data.phone) {
      wx.showToast({
        title: '请输入手机号',
        icon: 'none'
      });
      return;
    }
    
    // 模拟发送请求
    const phoneNumber = this.data.phone;
    setTimeout(() => {
      const randomCode = Math.floor(100000 + Math.random() * 900000);
      this.setData({
        code: randomCode,
        showCode: `验证码已发送，为${randomCode}`
      });
      // 这里需要替换为实际的发送验证码API
      // wx.request({
      //   url: 'your-server-url/send-code', // 替换为你的服务器地址
      //   data: { mobile: phoneNumber, code: randomCode },
      //   method: 'POST',
      //   success: () => {
      //     console.log('验证码发送成功');
      //   },
      //   fail: () => {
      //     console.error('验证码发送失败');
      //   }
      // });
    }, 2000); // 模拟延迟2秒响应
  },
  
  verifyCode(e) {
    // 用户输入验证码后可以添加此事件处理函数进行验证
    // 如果验证通过，可以继续后续流程
  }
})
</script>

这个例子中，当用户点击“获取验证码”按钮时，会模拟一个延迟2秒的请求发送到服务器，并更新显示的文字。实际应用中，你需要将`wx.request`替换为你的后端提供的发送验证码接口，并在`verifyCode`函数中添加用户输入验证码后的验证过程。