微信小程序系列四：表单提交

最新推荐文章于 2025-07-04 15:19:03 发布

小丫么小菜菜

最新推荐文章于 2025-07-04 15:19:03 发布

阅读量768

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序系列文章标签：表单提交

本文链接：https://blog.youkuaiyun.com/stp_zsj/article/details/81742437

小程序系列专栏收录该内容

16 篇文章

订阅专栏

本文详细解析了微信小程序中用于登录的表单组件，包括手机号输入框与验证码功能的实现方式，展示了如何通过表单提交数据进行登录操作，并提到了验证码倒计时的处理思路。

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

<view class='container'>
  <form bindsubmit='denglu'>
    <view class='list'>
      <view class='left'>
        <label>手机号:</label>
        <input type='number' name="tel" bindinput='shj' maxlength='11' placeholder='请输入手机号'></input>
      </view>
      <view class='right'></view>
    </view>
    <view class='list border'>
      <view class='left'>
        <label>验证码:</label>
        <input type='number' name="code" placeholder='请输入验证码'></input>
      </view>
      <view class='right'>
        <button class='send' wx:if="{{isShow}}" catchtap='send'>发送验证码</button>
        <button class='send' disabled='{{true}}' wx:else>{{countdown}}秒后重新发送</button>
      </view>
    </view>
    <button form-type='submit' class='btn'>登录</button>
  </form>
</view>

const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isShow:true
  },

  //登录
  denglu:function(e){
     let fromdate=e.detail.value;
     wx.request({
       data:fromdate,
       success:function(res){}
     })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

})

注意：

表单提交是根据input的name属性进行键值配对的

验证码倒计时请看下一篇文章倒计时