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

最新推荐文章于 2025-05-04 15:47:13 发布

itclanCoder

最新推荐文章于 2025-05-04 15:47:13 发布

阅读量4.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： js javascript 小程序 html java

本文链接：https://blog.youkuaiyun.com/wzc_coder/article/details/108898605

本文介绍了在微信小程序中获取用户表单输入值的两种方式：一是使用form表单结合button，二是非表单方式，通过bindchange事件监听。form表单方式简单但存在局限，非表单方式更灵活但可能增加性能消耗。文中提供了详细代码示例和应用场景分析。

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

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

背景

在小程序开发中,经常有用到表单,我们往往需要在小程序端获取用户表单输入框中的值(通常用户输入的有: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"
     &