微信小程序-如何获取用户表单控件中的值

<view class="container">
  <form bindsubmit="formSubmit">
    <view>
      <view class="title">switch</view>
      <switch checked name="switchChecked" />
    </view>
    <view>
      <view class="title">radio</view>
      <radio-group name="radio">
        <label><radio checked value="boy" />男</label>
        <label><radio value="girl" />女</label>
      </radio-group>
    </view>

    <view>
      <view class="title">checkbox</view>
      <checkbox-group name="checkbox">
        <label><checkbox checked value="itclanCoder" />itclanCoder</label>
        <label><checkbox value="itclan" />itclan</label>
      </checkbox-group>
    </view>

    <view>
      <view class="title">slider</view>
      <slider value="50" name="slider" show-value></slider>
    </view>
    <view>
      <input
        class="input"
        value="{{inputVal}}"
        name="input"
        placeholder="这是一个输入框"
      />
    </view>
    <view>
      <button class="submitBtn" size="default" type="primary" formType="submit">
        提交
      </button>
    </view>
  </form>
</view>

/* pages/getformdata/getformdata.wxss */
.container {
  padding: 15rpx 40rpx;
}

.title {
  margin: 20rpx 0;
}

label {
  margin-right: 50rpx;
}

.input {
  border-bottom: 1px solid #abcdef;
}

.submitBtn {
  margin-top: 40rpx;
}

button:not([size='mini']) {
  width: 100% !important;
}

// pages/getformdata/getformdata.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    inputVal: '123',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {},
  // 表单提交
  formSubmit(event) {
    console.log(event); // event.detail.value就可以拿到具体表单中的值
    const {
      switchChecked,
      radio,
      checkbox,
      slider,
      input,
    } = event.detail.value; // 解构
    console.log(switchChecked, radio, checkbox, slider, input); // true "boy" ["itclanCoder"] 50 "123"
  },
});

<!--pages/getformdata/getformdata.wxml-->
<view class="container">
  <view>
    <view>
      <view class="title">switch</view>
      <switch checked bindchange="handleSwitch" />
    </view>
    <view>
      <view class="title">radio</view>
      <!-- radio-group是不能少的,否则就会出问题的,下面的checkbox-group也是 -->
      <radio-group bindchange="handleRadio">
        <label><radio checked value="boy" />男</label>
        <label><radio value="girl" />女</label>
      </radio-group>
    </view>

    <view>
      <view class="title">checkbox</view>
      <checkbox-group bindchange="handleCheckBox">
        <label><checkbox checked value="itclanCoder" />itclanCoder</label>
        <label><checkbox value="itclan" />itclan</label>
      </checkbox-group>
    </view>

    <view>
      <view class="title">slider</view>
      <slider
        bindchange="handleSlideChange"
        value="{{sliderVal}}"
        show-value
      ></slider>
    </view>
    <view>
      <input
        bindinput="handleInputChange"
        class="input"
        value="{{inputVal}}"
        placeholder="这是一个输入框"
      />
    </view>
    <!-- 此处并非用的button按钮,照样可以提交表单数据 -->
    <view>
      <view class="submitBtn" bindtap="handleSubmit">提交</view>
    </view>
  </view>
</view>

// pages/getformdata/getformdata.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    switchVal: true, // switch默认初始化值
    radioVal: 'boy', // radio初始化值,有时候男女,也可以用1,0等表示男,女的
    checkboxVal: 'itclanCoder', // checkbox初始化值
    sliderVal: 30,
    inputVal: '123', // 输入框初始化值
  },

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

  // switch中的值
  handleSwitch(event) {
    console.log(event);
    const switchVal = event.detail.value;
    this.setData({
      // 通过setData更改数据
      switchVal,
    });
  },

  // 触发readio
  handleRadio(event) {
    console.log(event);
    const radio = event.detail.value;
    this.setData({
      radioVal: radio,
    });
  },

  // 触发checkbox
  handleCheckBox(event) {
    console.log(event);
    const checkbox = event.detail.value;
    this.setData({
      checkboxVal: checkbox,
    });
  },

  // 触发slideChange
  handleSlideChange(event) {
    console.log(event);
    const sliderVal = event.detail.value;
    this.setData({
      sliderVal: sliderVal,
    });
  },

  // input输入框的值
  handleInputChange(event) {
    console.log(event);
    const inputVal = event.detail.value;
    this.setData({
      inputVal: inputVal,
    });
  },

  // 表单提交
  handleSubmit() {
    console.log(
      this.data.switchVal,
      this.data.radioVal,
      this.data.checkboxVal,
      this.data.sliderVal,
      this.data.inputVal
    ); // true "boy" "itclanCoder" 30 "123"
  },
});