form

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

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

属性说明

属性名类型说明平台差异说明
report-submitBoolean是否返回 formId 用于发送模板消息微信小程序、支付宝小程序
@submitEventHandle携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}，report-submit 为 true 时才会返回 formId
@resetEventHandle表单重置时会触发 reset 事件

示例

  1. <template>
  2.     <view>
  3.         <view class="uni-padding-wrap uni-common-mt">
  4.             <form @submit="formSubmit" @reset="formReset">
  5.                 <view class="uni-form-item uni-column">
  6.                     <view class="title">switch</view>
  7.                     <view>
  8.                         <switch name="switch" />
  9.                     </view>
  10.                 </view>
  11.                 <view class="uni-form-item uni-column">
  12.                     <view class="title">radio</view>
  13.                     <radio-group name="radio">
  14.                         <label>
  15.                             <radio value="radio1" />选项一
  16.                         </label>
  17.                         <label>
  18.                             <radio value="radio2" />选项二
  19.                         </label>
  20.                     </radio-group>
  21.                 </view>
  22.                 <view class="uni-form-item uni-column">
  23.                     <view class="title">checkbox</view>
  24.                     <checkbox-group name="checkbox">
  25.                         <label>
  26.                             <checkbox value="checkbox1" />选项一
  27.                         </label>
  28.                         <label>
  29.                             <checkbox value="checkbox2" />选项二
  30.                         </label>
  31.                     </checkbox-group>
  32.                 </view>
  33.                 <view class="uni-form-item uni-column">
  34.                     <view class="title">slider</view>
  35.                     <slider value="50" name="slider" show-value></slider>
  36.                 </view>
  37.                 <view class="uni-form-item uni-column">
  38.                     <view class="title">input</view>
  39.                     <input class="uni-input" name="input" placeholder="这是一个输入框" />
  40.                 </view>
  41.                 <view class="uni-btn-v">
  42.                     <button formType="submit">Submit</button>
  43.                     <button type="default" formType="reset">Reset</button>
  44.                 </view>
  45.             </form>
  46.         </view>
  47.     </view>
  48. </template>
  1. export default {
  2.     data() {
  3.         return {
  4.             pickerHidden: true,
  5.             chosen: ''
  6.         }
  7.     },
  8.     methods: {
  9.         pickerConfirm: function(e) {
  10.             this.pickerHidden = true
  11.             this.chosen = e.target.value
  12.         },
  13.         pickerCancel: function(e) {
  14.             this.pickerHidden = true
  15.         },
  16.         pickerShow: function(e) {
  17.             this.pickerHidden = false
  18.         },
  19.         formSubmit: function(e) {
  20.             console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
  21.         },
  22.         formReset: function(e) {
  23.             console.log('清空数据')
  24.             this.chosen = ''
  25.         }
  26.     }
  27. }

uniapp

tips

发现错误？想参与编辑？在 GitHub 上编辑此页面！