微信小程序表单 form 组件

爱被打了一巴掌 2021-09-08 01:08 581阅读 0赞

[完整**微信小程序(Java后端) 技术贴**目录清单页面（必看）][Java_]

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

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

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">必填</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">report-submit</td> 
   <td align="left">boolean</td> 
   <td align="left">false</td> 
   <td align="left">否</td> 
   <td align="left">是否返回 formId 用于发送<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/template-message.html" rel="nofollow">模板消息</a></td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">report-submit-timeout</td> 
   <td align="left">number</td> 
   <td align="left">0</td> 
   <td align="left">否</td> 
   <td align="left">等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.6.2</a></td> 
  </tr> 
  <tr> 
   <td align="left">bindsubmit</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">bindreset</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">表单重置时会触发 reset 事件</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
 </tbody> 
</table>

**示例代码**

// [在开发者工具中预览效果][Link 1]

index.wxml

<form bindsubmit="formSubmit" bindreset="formReset">
      <view class="section section_gap">
        <view class="section__title">switch</view>
        <switch name="switch"/>
      </view>
      <view class="section section_gap">
        <view class="section__title">slider</view>
        <slider name="slider" show-value ></slider>
      </view>
    
      <view class="section">
        <view class="section__title">input</view>
        <input name="input" placeholder="please input here" />
      </view>
      <view class="section section_gap">
        <view class="section__title">radio</view>
        <radio-group name="radio-group">
          <label><radio value="radio1"/>radio1</label>
          <label><radio value="radio2"/>radio2</label>
        </radio-group>
      </view>
      <view class="section section_gap">
        <view class="section__title">checkbox</view>
        <checkbox-group name="checkbox">
          <label><checkbox value="checkbox1"/>checkbox1</label>
          <label><checkbox value="checkbox2"/>checkbox2</label>
        </checkbox-group>
      </view>
      <view class="btn-area">
        <button formType="submit">Submit</button>
        <button formType="reset">Reset</button>
      </view>
    </form>

index.js

Page({ 
      formSubmit: function (e) { 
        console.log('form发生了submit事件，携带数据为：', e.detail.value)
      },
      formReset: function () { 
        console.log('form发生了reset事件')
      }
    })

运行效果：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b2QmrjV8-1622384065053)(image-20210529095750785.png)\]][img-b2QmrjV8-1622384065053_image-20210529095750785.png]

点击`Submit`提交：

控制台输出：  
![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aIw5hoqh-1622384065057)(image-20210529095817390.png)\]][img-aIw5hoqh-1622384065057_image-20210529095817390.png]

> 微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[switch]: https://developers.weixin.qq.com/miniprogram/dev/component/switch.html
[input]: https://developers.weixin.qq.com/miniprogram/dev/component/input.html
[checkbox]: https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html
[slider]: https://developers.weixin.qq.com/miniprogram/dev/component/slider.html
[radio]: https://developers.weixin.qq.com/miniprogram/dev/component/radio.html
[picker]: https://developers.weixin.qq.com/miniprogram/dev/component/picker.html
[form]: https://developers.weixin.qq.com/miniprogram/dev/component/form.html
[button]: https://developers.weixin.qq.com/miniprogram/dev/component/button.html
[Link 1]: https://developers.weixin.qq.com/s/MUaz7cmy6AYq
[img-b2QmrjV8-1622384065053_image-20210529095750785.png]: /images/20210716/7357ee7ac0e74f2f9ff5dde474f0359f.png
[img-aIw5hoqh-1622384065057_image-20210529095817390.png]: /images/20210716/599c95279fee4840a13c640a9dab0abf.png