《样式设计001：表单的2种提交方式》

描述：在开发小程序过程中，发现一些不错的案例，平时使用也比较多，稍微总结了下经验，以下内容可以直接复制使用，希望对大家有所帮助，废话不多说直接上干货！

一：表单的2种提交方式

截图展示部分（效果图）

（二）form 表单：获取组件的值

优点: 传统的表单提交方式,通过在表单控件内设置name的值,在表单统一提交时,就可以通过event.detail.value拿到表单中各个表单组件的值,代码量少,简单

缺点: 处于form表单之外的其他表单控件值是无法拿到的,button按钮页必须要在form内,并且写法固定

1、这是最普遍通用的一种方法,所有用户输入的组件放置在form内,当点击form表单中form-type为submit的button组件时，它会将表单组件中的value值进行提交,但此时需要在表单组件中加上name来作为key

wxml代码

<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><inputclass="input"value="{{inputVal}}"name="input"placeholder="这是一个输入框"/></view><view><button class="submitBtn" size="default" type="primary" formType="submit">提交</button></view></form>
</view>

wxss代码

/* pages/getformdata/getformdata.wxss */
.container {padding: 15rpx 40rpx;
}.title {margin: 20rpx 0;
}label {margin-right: 50rpx;
}.input {border-bottom: 1px solid #abcdef;
}.submitBtn {margin-top: 40rpx;
}button:not([size='mini']) {width: 100% !important;
}

2、在上面的示例代码中,你会发现当有多个radio,多个checkbox时,它会被包裹在radio-group,checkbox-group中,不然是无法获取到控件中的具体数值的,当然也不是说非得包裹,那只能使用第二种方法获取控件中的值

3、其中表单中的switch,radio,checkbox中的checked并不是必须的,可以填写一个默认初始值,进行控制,在本文示例中,我是给了一个初始值在form表单中绑定了bindsubmit事件方法,它会携带form中的数据触发submit事件，同时form表单内的button按钮中的formType绑定了submit事件,它是用于form表单组件提交的,会触发form组件的submit(提交表单)/reset(重置表单)事件

wsjs代码

// pages/getformdata/getformdata.js
Page({/*** 页面的初始数据*/data: {inputVal: '123',},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {},// 表单提交formSubmit(event) {console.log(event); // event.detail.value就可以拿到具体表单中的值const {switchChecked,radio,checkbox,slider,input,} = event.detail.value; // 解构console.log(switchChecked, radio, checkbox, slider, input); // true "boy" ["itclanCoder"] 50 "123"},
});

（二）非from表单：获取组件的值

优点:非表单form,button组合方式方式提交数据,比较灵活(在表单form之外也能提交数据)

缺点: 需要添加绑定bindchange事件,需要触发setData,但频繁的触发setData是比较消耗性能,在表单组件不是很多的情况下,可以选用此方式

去除了表单form,name属性,在表单组件中新增了bindchange方法

wxml代码

<view class="container"><view><view><view class="title">switch</view><switch checked bindchange="handleSwitch" /></view><view><view class="title">radio</view><!-- radio-group是不能少的,否则就会出问题的,下面的checkbox-group也是 --><radio-group bindchange="handleRadio"><label><radio checked value="boy" />男</label><label><radio value="girl" />女</label></radio-group></view><view><view class="title">checkbox</view><checkbox-group bindchange="handleCheckBox"><label><checkbox checked value="itclanCoder" />itclanCoder</label><label><checkbox value="itclan" />itclan</label></checkbox-group></view><view><view class="title">slider</view><sliderbindchange="handleSlideChange"value="{{sliderVal}}"show-value></slider></view><view><inputbindinput="handleInputChange"class="input"value="{{inputVal}}"placeholder="这是一个输入框"/></view><!-- 此处并非用的button按钮,照样可以提交表单数据 --><view><view class="submitBtn" bindtap="handleSubmit">提交</view></view></view>
</view>

wxss代码

/* pages/getformdata/getformdata.wxss */
.container {padding: 15rpx 40rpx;
}.title {margin: 20rpx 0;
}label {margin-right: 50rpx;
}.input {border-bottom: 1px solid #abcdef;
}.submitBtn {margin-top: 40rpx;
}button:not([size='mini']) {width: 100% !important;
}

当在switch,radio-group,checkbox-group,slider,input中添加了bindchange方法,checked,input发生改变时就会触发 change 事件,然后通过携带事件对象,拿到表单组件对应的具体数值

wsjs代码

// pages/getformdata/getformdata.js
Page({/*** 页面的初始数据*/data: {switchVal: true, // switch默认初始化值radioVal: 'boy', // radio初始化值,有时候男女,也可以用1,0等表示男,女的checkboxVal: 'itclanCoder', // checkbox初始化值sliderVal: 30,inputVal: '123', // 输入框初始化值},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {},// switch中的值handleSwitch(event) {console.log(event);const switchVal = event.detail.value;this.setData({// 通过setData更改数据switchVal,});},// 触发readiohandleRadio(event) {console.log(event);const radio = event.detail.value;this.setData({radioVal: radio,});},// 触发checkboxhandleCheckBox(event) {console.log(event);const checkbox = event.detail.value;this.setData({checkboxVal: checkbox,});},// 触发slideChangehandleSlideChange(event) {console.log(event);const sliderVal = event.detail.value;this.setData({sliderVal: sliderVal,});},// input输入框的值handleInputChange(event) {console.log(event);const inputVal = event.detail.value;this.setData({inputVal: inputVal,});},// 表单提交handleSubmit() {console.log(this.data.switchVal,this.data.radioVal,this.data.checkboxVal,this.data.sliderVal,this.data.inputVal); // true "boy" "itclanCoder" 30 "123"},
});