微信小程序 form 表单提交

表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。

当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

.wxml代码

<form bindsubmit="formSubmit" bindreset="formReset">
  <view class="section">
    <view class="section__name">姓名</view>
    <input name="name" class='name'/>
  </view>
   <view class="section">
    <view class="section__tel">联系方式</view>
    <input name="tel" class='tel'/>
  </view>
  <view class="section">
    <view class="section__sex">性别</view>
    <radio-group name="sex">
      <label class='sexbox'><radio value="男"/> 男</label>
      <label class='sexbox'><radio value="男"/> 女</label>
    </radio-group>
  </view>
  <view class="section">
    <view class="section__project">预约商品</view>
    <checkbox-group name="project">
      <label class='proL'><checkbox value="鞋子"/> 鞋子</label>
      <label class='proL'><checkbox value="衣服"/> 衣服"</label>
      <label class='proL'><checkbox value="手机"/> 手机</label>
      <label class='proL'><checkbox value="笔记本"/> 笔记本</label>
    </checkbox-group>
  </view>
  <view class="section">
  <view class="section__project">留言备注</view>
  <textarea name="message" class='message'/>
</view>
  <view class="btn-area">
    <button form-type="submit" class='subyy'>预约</button>
  </view>
</form>

.wxml

  formSubmit: function (e) {
    var name = e.detail.value.name
    var tel = e.detail.value.tel
    var sex = e.detail.value.sex
    var obj = e.detail.value.project
    var project = "";
    for (var index in obj) {
      project = project + obj[index] + ",";
    }
    // var project = e.detail.value.project
    var message = e.detail.value.message
    var msg = '姓名：' + name + '<br>' + '联系电话：' + tel + '<br>' + '性别' + sex + '<br>' + '预约商品：' + project + '<br>' + '留言备注：' + message
    var that = this
    if (name == '' | tel == '' | sex == '' | project == ''){
      wx.showToast({
        title: '必填选项不能为空',
        icon: 'none',
        duration: 2000
      })
    }
    if (!(/^(13\d|14\d|15\d|17\d|18[0-9]|19\d)\d{8}$/.test(tel))) {
      wx.showToast({
        title: '手机号不正确',
        icon: 'none',
        duration: 2000
      })
      return false
    }

    wx.request({
      url: app.appUrl + 'getMessage',
      data: {
        msg: msg,
        tel: tel
      },
      success(res) {
        console.log(res)
        if (res.data.code==700){
          wx.showToast({
            title: res.data.message,
            icon: 'none',
            duration: 2000
          })
        }else{
          wx.showToast({
            title: res.data.message,
            icon: 'success',
            duration: 2000
          })
        }
        
      }
    })
    
  },