1. <template>
    2.     <view>
    3.         <view>
    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>
    12.                 <view class="uni-form-item uni-column">
    13.                     <view class="title">radio</view>
    14.                     <radio-group name="radio">
    15.                         <label>
    16.                             <radio value="radio1" /><text>选项一</text>
    17.                         </label>
    18.                         <label>
    19.                             <radio value="radio2" /><text>选项二</text>
    20.                         </label>
    21.                     </radio-group>
    22.                 </view>
    23.                 <view class="uni-form-item uni-column">
    24.                     <view class="title">checkbox</view>
    25.                     <checkbox-group name="checkbox">
    26.                         <label>
    27.                             <checkbox value="checkbox1" /><text>选项一</text>
    28.                         </label>
    29.                         <label>
    30.                             <checkbox value="checkbox2" /><text>选项二</text>
    31.                         </label>
    32.                     </checkbox-group>
    33.                 </view>
    34.                 <view class="uni-form-item uni-column">
    35.                     <view class="title">slider</view>
    36.                     <slider value="50" name="slider" show-value></slider>
    37.                 </view>
    38.                 <view class="uni-form-item uni-column">
    39.                     <view class="title">input</view>
    40.                     <input class="uni-input" name="input" placeholder="这是一个输入框" />
    41.                 </view>
    42.                 <view class="uni-btn-v">
    43.                     <button form-type="submit">Submit</button>
    44.                     <button type="default" form-type="reset">Reset</button>
    45.                 </view>
    46.             </form>
    47.         </view>
    48.     </view>
    49. </template>
    51. <script>
    52.     export default {
    53.         data() {
    54.             return {
    55.                 counter: 0,
    56.             }
    57.         },
    58.         onLoad() {
    60.         },
    61.         methods: {
    62.             formSubmit: function(e) {
    63.                 console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
    64.                 var formdata = e.detail.value
    65.                 uni.showModal({
    66.                     content: '表单数据内容：' + JSON.stringify(formdata),
    67.                     showCancel: false
    68.                 });
    69.             },
    70.             formReset: function(e) {
    71.                 console.log('清空数据')
    72.             }
    73.         },
    74.     }
    75. </script>

    效果图：
    image.png