乐趣区

关于javascript:微信小程序如何获取用户表单控件中的值传统form与非表单方式获取表单组件的值

jiezi

背景

在小程序开发中, 常常有用到表单, 咱们往往须要在小程序端获取用户表单输入框中的值 (通常用户输出的有:switch,input,checkbox,slider,radio,picker) 等, 通过触发事件, 而后提交给后端解决

那么在小程序当中有哪些形式能够获取到表单中的值呢, 又怎么通过非表单提交的形式获取用户输入框中的值呢

换言之, 若提交按钮在 form 之外, 又如何实现表单的提交呢

在小程序中有两种形式能够获取表单的值

form 表单获取表单组件的值

这是最广泛通用的一种办法, 所有用户输出的组件搁置在 form 内, 当点击 form 表单中 form-type 为submit的 button 组件时

它会将表单组件中的 value 值进行提交, 但此时须要在表单组件中加上 name 来作为key

如下 UI 所示:

<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>

以下是 wxss 代码

/* 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;}

在下面的示例代码中, 你会发现当有多个 radio, 多个checkbox 时, 它会被包裹在 radio-group,checkbox-group 中, 不然是无奈获取到控件中的具体数值的, 当然也不是说非得包裹, 那只能应用第二种办法获取控件中的值

其中表单中的 switch,radio,checkbox 中的 checked 并不是必须的, 能够填写一个默认初始值, 进行管制, 在本文示例中, 我是给了一个初始值

在 form 表单中绑定了 bindsubmit 事件办法, 它会携带 form 中的数据触发 submit 事件

同时 form 表单内的 button 按钮中的 formType 绑定了 submit 事件, 它是用于 form 表单组件提交的, 会触发 form 组件的 submit(提交表单)/reset(重置表单) 事件

上面来看看逻辑代码:

// 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"
  },
});

以上通过 form 表单, 获取表单中控件的值, 是通过在 switch,radio-group,checkbox-group,slider,input 组件中增加 name 属性, 从而通过 button 中的 formType 联合 form 的bindsubmit事件, 就能够对立的拿到表单组件中的值

当你拿到表单中的值, 就能够持续前面的操作, 传值, 把对应的字段提交给后盾解决, 就能够了的

长处 : 传统的表单提交形式, 通过在表单控件内设置name 的值, 在表单对立提交时, 就能够通过 event.detail.value 拿到表单中各个表单组件的值, 代码量少, 简略

毛病 : 处于form 表单之外的其余表单控件值是无奈拿到的,button按钮页必须要在 form 内, 并且写法固定

上面介绍一种非表单提交形式, 也就是不依赖form, 同样也能够获取到表单组件的各个数值

这种利用场景在小程序中是很常见的, 表单提交数据, 不肯定就非得是 button 按钮的形式, 只有能拿到表单组件中的值, 就达到目标了的

非表单形式获取表单组件的值

上面是实例成果

以下是实例代码, 代码与下面相似, 只是略微更改了一下

去除了表单 form,name 属性, 在表单组件中新增了 bindchange 办法

<!--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>

当在 switch,radio-group,checkbox-group,slider,input 中增加了 bindchange 办法,checked,input产生扭转时就会触发 change 事件, 而后通过携带事件对象, 拿到表单组件对应的具体数值

如下代码所示

// 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"
  },
});

以上就是通过非表单提交的形式获取表单组件中的值, 此办法不局限于 form 表单, 比拟灵便, 先初始化表单, 而后给表单组件绑定 bindchange 事件, 当表单组件 checked, 或input 产生扭转时, 就会触发 change 事件, 而后通过事件对象就能够拿到表单组件的值

在 bindchange 事件的办法内, 从新 setData 一次数据就能够了的

长处 : 非表单 form,button 组合形式形式提交数据, 比拟灵便(在表单form 之外也能提交数据)

毛病 : 须要增加绑定bindchange 事件, 须要触发 setData, 但频繁的触发setData 是比拟耗费性能, 在表单组件不是很多的状况下, 能够选用此形式的

这个是有利用场景的, 比方: 如下小程序中我的页面中, 的就是用非表单形式提交数据的

留神

传统 form 提交数据时, 必须要设置 name 来作为 key, 否则就拿不到表单组件中的值, 而非form 表单模式提交数据, 须要给表单组件绑定bindchang, 通过事件对象的形式获取组件中的数据

这个是有利用场景的, 比方: 如下小程序中我的页面中, 的就是用非表单形式提交数据的

总结

全文总结两段话就是:

  1. 小程序中获取表单组件的值有两种形式, 一种是通过传统的 form 联合 button 组合的形式, 这种形式有局限性, 所有的表单组件都须要在 form 内, 通过在表单组件内设置 name 值的形式获取表单组件中的值(必须要设置, 否则拿到表单组件的值就是 undefined)
  2. 非表单 form 提交数据的形式是通过在表单组件上绑定 bindchange 事件, 通过事件对象的形式, 获取 event.detail.value 的形式即可拿到, 但同样就义性能为代价, 须要触发 setData, 从而在最终提交表单时, 拿到具体的表单数值

原文出处 -https://coder.itclan.cn/- 微信小程序 - 如何获取用户表单控件中的值

相干参考文档

form 表单组件

退出移动版