一、小程序有提供专门的表单托管,和ng,vue,ant一样可以一起提交所有表单的数据
直接看代码:
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>
</view>
</form>
page的逻辑部分:
const page = {
onLoad() {
wx.setNavigationBarTitle({ title: '表单测试' });
},
data: {},
formSubmit: function(event) {
console.log('form发生了submit事件,携带数据为:', e.detail.value)
},
};
注意:wxml里面的bindsubmit的值就是提交管理整个表单值得函数,botton只是告诉你这个是提交的action,触发的是bindsubmit所对应的函数
也就说:
<button formType="submit">Submit</button>只是触发提交的动作发生,真正的触发的是bindsubmit所赋值的formSubmit函数对表单数据进行提交
bindsubmit="formSubmit"
例子来源于官网
https://developers.weixin.qq.com/miniprogram/dev/component/form.html
效果: