微信小程序-如何獲取用戶表單控件中的(de)值
發表時(shí)間：2020-10-1
發布人(rén)：融晨科技
浏覽次數：64
雖互不(bù)曾謀面,但希望能和(hé / huò)您成爲(wéi / wèi)筆尖下的(de)朋友
以(yǐ)讀書,技術,生活爲(wéi / wèi)主,偶爾撒點雞湯
不(bù)作,不(bù)敷衍,意在(zài)真誠吐露,用心分享
點擊左上(shàng)方,可關注本刊
标星公衆号（ID：itclanCoder）
如果不(bù)知道(dào)如何操作
點擊這(zhè)裏,标星不(bù)迷路
背景
在(zài)小程序開發中,經常有用到(dào)表單,我們往往需要(yào / yāo)在(zài)小程序端獲取用戶表單輸入框中的(de)值(通常用戶輸入的(de)有:switch,input,checkbox,slider,radio,picker)等,通過觸發事件,然後提交給後端處理
那麽在(zài)小程序當中有哪些方式可以(yǐ)獲取到(dào)表單中的(de)值呢,又怎麽通過非表單提交的(de)方式獲取用戶輸入框中的(de)值呢
換言之(zhī),若提交按鈕在(zài)form之(zhī)外,又如何實現表單的(de)提交呢
在(zài)小程序中有兩種方式可以(yǐ)獲取表單的(de)值
form 表單獲取表單組件的(de)值
這(zhè)是(shì)最普遍通用的(de)一種方法,所有用戶輸入的(de)組件放置在(zài)form内,當點擊form表單中form-type爲(wéi / wèi)submit的(de)button組件時(shí)
它會将表單組件中的(de)value值進行提交,但此時(shí)需要(yào / yāo)在(zài)表單組件中加上(shàng)name來(lái)作爲(wéi / wèi)key
如下 UI 所示:
<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>
<input
class="input"
value="{{inputVal}}"
name="input"
placeholder="這(zhè)是(shì)一個(gè)輸入框"
/>
</view>
<view>
<button class="submitBtn" size="default" type="primary" formType="submit">
提交
</button>
</view>
</form>
</view>
以(yǐ)下是(shì)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;
}
在(zài)上(shàng)面的(de)示例代碼中,你會發現當有多個(gè)radio,多個(gè)checkbox時(shí),它會被包裹在(zài)radio-group,checkbox-group中,不(bù)然是(shì)無法獲取到(dào)控件中的(de)具體數值的(de),當然也(yě)不(bù)是(shì)說(shuō)非得包裹,那隻能使用第二種方法獲取控件中的(de)值
其中表單中的(de)switch,radio,checkbox中的(de)checked并不(bù)是(shì)必須的(de),可以(yǐ)填寫一個(gè)默認初始值,進行控制,在(zài)本文示例中,我是(shì)給了(le／liǎo)一個(gè)初始值
在(zài)form表單中綁定了(le／liǎo)bindsubmit事件方法,它會攜帶form中的(de)數據觸發submit事件
同時(shí)form表單内的(de)button按鈕中的(de)formType綁定了(le／liǎo)submit事件,它是(shì)用于(yú)form表單組件提交的(de),會觸發form組件的(de)submit(提交表單)/reset(重置表單)事件
下面來(lái)看看邏輯代碼:
// pages/getformdata/getformdata.js
Page({
/**
* 頁面的(de)初始數據
*/
data: {
inputVal: '123',
},
/**
* 生命周期函數--監聽頁面加載
*/
>
當你拿到(dào)表單中的(de)值,就(jiù)可以(yǐ)繼續後面的(de)操作,傳值,把對應的(de)字段提交給後台處理,就(jiù)可以(yǐ)了(le／liǎo)的(de)
優點: 傳統的(de)表單提交方式,通過在(zài)表單控件内設置name的(de)值,在(zài)表單統一提交時(shí),就(jiù)可以(yǐ)通過event.detail.value拿到(dào)表單中各個(gè)表單組件的(de)值,代碼量少,簡單
缺點: 處于(yú)form表單之(zhī)外的(de)其他(tā)表單控件值是(shì)無法拿到(dào)的(de),button按鈕頁必須要(yào / yāo)在(zài)form内,并且寫法固定
下面介紹一種非表單提交方式,也(yě)就(jiù)是(shì)不(bù)依賴form,同樣也(yě)可以(yǐ)獲取到(dào)表單組件的(de)各個(gè)數值
這(zhè)種應用場景在(zài)小程序中是(shì)很常見的(de),表單提交數據,不(bù)一定就(jiù)非得是(shì)button按鈕的(de)方式,隻要(yào / yāo)能拿到(dào)表單組件中的(de)值,就(jiù)達到(dào)目的(de)了(le／liǎo)的(de)
非表單方式獲取表單組件的(de)值
下面是(shì)實例效果
以(yǐ)下是(shì)實例代碼,代碼與上(shàng)面類似,隻是(shì)稍微更改了(le／liǎo)一下
去除了(le／liǎo)表單form,name屬性,在(zài)表單組件中新增了(le／liǎo)bindchange方法
<!--pages/getformdata/getformdata.wxml-->
<view class="container">
<view>
<view>
<view class="title">switch</view>
<switch checked bindchange="handleSwitch" />
</view>
<view>
<view class="title">radio</view>
<!-- radio-group是(shì)不(bù)能少的(de),否則就(jiù)會出(chū)問題的(de),下面的(de)checkbox-group也(yě)是(shì) -->
<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>
<slider
bindchange="handleSlideChange"
value="{{sliderVal}}"
show-value
></slider>
</view>
<view>
<input
bindinput="handleInputChange"
class="input"
value="{{inputVal}}"
placeholder="這(zhè)是(shì)一個(gè)輸入框"
/>
</view>
<!-- 此處并非用的(de)button按鈕,照樣可以(yǐ)提交表單數據 -->
<view>
<view class="submitBtn" bindtap="handleSubmit">提交</view>
</view>
</view>
</view>
當在(zài)switch,radio-group,checkbox-group,slider,input中添加了(le／liǎo)bindchange方法,checked,input發生改變時(shí)就(jiù)會觸發 change 事件,然後通過攜帶事件對象,拿到(dào)表單組件對應的(de)具體數值
如下代碼所示
// pages/getformdata/getformdata.js
Page({
/**
* 頁面的(de)初始數據
*/
data: {
switchVal: true, // switch默認初始化值
radioVal: 'boy', // radio初始化值,有時(shí)候男女,也(yě)可以(yǐ)用1,0等表示男,女的(de)
checkboxVal: 'itclanCoder', // checkbox初始化值
sliderVal: 30,
inputVal: '123', // 輸入框初始化值
},
/**
* 生命周期函數--監聽頁面加載
*/
>(打開小程序-愛的(de)鼓勵頁面中的(de)表單用的(de)就(jiù)是(shì)非form提交方式)
總結
全文總結兩段話就(jiù)是(shì):
小程序中獲取表單組件的(de)值有兩種方式,一種是(shì)通過傳統的(de)form結合button組合的(de)方式,這(zhè)種方式有局限性,所有的(de)表單組件都需要(yào / yāo)在(zài)form内,通過在(zài)表單組件内設置name值的(de)方式獲取表單組件中的(de)值(必須要(yào / yāo)設置,否則拿到(dào)表單組件的(de)值就(jiù)是(shì)`undefined`)
另一種是(shì)非表單form提交數據的(de)方式是(shì)通過在(zài)表單組件上(shàng)綁定bindchange事件,通過事件對象的(de)方式,獲取event.detail.value的(de)方式即可拿到(dào),但同時(shí)犧牲性能爲(wéi / wèi)代價,需要(yào / yāo)觸發setData,從而(ér)在(zài)最終提交表單時(shí),拿到(dào)具體的(de)表單數值
相關參考文檔
form 表單組件https://developers.weixin.qq.com/miniprogram/dev/component/form.html
記賬就(jiù)用輕記賬
公衆号（ID：itclanCoder）
碼能讓您早脫菜籍，文能讓您洗淨鉛華
可能您還想看更多：
小程序-雲開發-實現生成小程序碼
Js篇-面試題12-如何解析 URL 提取 params 參數
Js篇-面試題11-比較下for..of與for..in的(de)區别
Js篇-面試題9-請說(shuō)一下Js中的(de)事件循環機制
vuepress建站過程中遇到(dào)的(de)一些問題
