雖互不(bù)曾謀面,但(dàn)希望能(néng)和(hé)您成為(wèi)筆(bǐ)β 尖下(xià)的(de)朋(péng)友(yǒu)

以讀(dú)書(shū),技(jì)術(shù),生>$£♦(shēng)活為(wèi)主,偶爾撒點雞湯

不(bù)作(zuò),不(bù)敷衍,意在真誠吐露,用(yòng)心分(fēn)享

點擊左上(shàng)方,可(kě)關注本刊

标星公衆号（ID：itclanCoder$£♥）

如(rú)果不(bù)知(zhī)道(dào)如(rú)何✔®←操作(zuò)

點擊這(zhè)裡(lǐ),标星不(bù)迷路(lù)

背景

在小(xiǎo)程序開(kāi)發中,經常有(yǒu)用(yòng)到(dào)表單,我們往往需α€'要(yào)在小(xiǎo)程序端獲取用(yòng)戶×&"<表單輸入框中的(de)值(通(tōng)常用(yòng)戶輸入的(de)有""↕(yǒu):switch,input,checkbox,slider,radio,picker)等,通(tōng)過觸發事(shì)件(jiàn),然後提交給後端處∏Ω↕理(lǐ)

那(nà)麽在小(xiǎo)程序當中有(yǒu)哪些(x↔↓×★iē)方式可(kě)以獲取到(dào)表單中的(de)值呢(ne¥​¥≈),又(yòu)怎麽通(tōng)過非表單提交的(de)方式獲取用(∞•yòng)戶輸入框中的(de)值呢(ne)

換言之,若提交按鈕在form之外(wài),又(yòu)如(rú)何實現(xiàn)表單的(de)提交呢(ne)

在小(xiǎo)程序中有(yǒu)兩種方式可(kě)以獲取表單的(de)值

form 表單獲取表單組件(jiàn)的(de)值

這(zhè)是(shì)最普遍通(tōng)用(yòng)的₩™α→(de)一(yī)種方法,所有(yǒu)用(yòng÷¶λ)戶輸入的(de)組件(jiàn)放(fàng)置在form內(nèi),當點擊form表單中form-type為(wèi)submit的(de)button組件(jiàn)時(shí)

它會(huì)将表單組件(jiàn)中的(de)value值進行(xíng)提交,但(dàn)此時(shí)需要(yào)在表單組件(ji→ àn)中加上(shàng)name來(lái)作(zuò)為(wèi)key

如(rú)下(xià) UI 所示:

<view class="container"&g★ $ t;
  <form bindsubmit="formSub♠λ•βmit">
    <view>
      &׶lt;view class="title">swi → ±tch</view>
      <swit♥≤ch checked name="switchChecπ¥¥≤ked" />
    </view>
    <view>¥$®↕;
      <view class="tit∏≤§™le">radio</view>
      ™™¶"<radio-group name="radio&#× ♣34;>
        <label>&ε‍λlt;radio checked value="boy" /&g"∏×t;男(nán)</label>
        <label&πλ™"gt;<radio value="girl" />女(nǚ)₹></label>
      </radio-group>
 ®α   </view>

    <view&g‍φδt;
      <view class="title">"αβ•checkbox</view>
      <checkbox-gro₩→up name="checkbox&×∞↕ε#34;>
        <label><checkbox check€<ed value="itclanCoder" />itclanCod'' er</label>
        <la₽"♦₩bel><checkbox value="itc$α≤←lan" />itclan</la→¥bel>
      </checkbox-group>
    &α¥®lt;/view>

    <view>
 ±♠¥"     <view class="title">slideδ€Ω♦r</view>
      <slider value&‌₹‍#61;"50" name="slid≤™er" show-value></sl••φ ider>
    </view>
    <view>​>£β
      <input
        cla¶♥®↓ss="input"
        val♦∞₹ue="{{inputVal}}"
        nam∑←$e="input"
        placeholder=®≈σ4;這(zhè)是(shì)一(yī)個(gè)輸入框"
      />
    ✔​</view>
    <view>
      <butσ ™ton class="submitBtn" siz≈‍e="default" type=§₩¶4;primary" formType="submit"♣™∏÷>
        提交
      </button>
​↑₽    </view>
  </form>
</view♠✔✘©>

以下(xià)是(shì)wxss代碼

/* pages/getformdata/getformd€Ω"ata.wxss */
.container {
  p$§adding: 15rpx 40rpx;
}

.tit∑$le {
  margin: 20rpx 0;
}

label {✔Ω∑
  margin-right: 50rpx;
}

.input {  •π
  border-bottom: 1px solid #abcdef¥↑₹€;
}

.submitBtn {
  margin-top: 40rpx;
}

↔π↑£button:not([size='mini']) {
 ≤£ width: 100% !important;
}

在上(shàng)面的(de)示例代碼中,你(nǐ)會(huì)∞ 發現(xiàn)當有(yǒu)多(duō)個(gè)radio,多(duō)個(gè)checkbox時(shí),它會(huì)被包裹在radio-group,checkbox-group中,不(bù)然是(shì)無法獲取到(dào)控件(jiàn)中的(de)具體(tǐ)數(shù✔€)值的(de),當然也(yě)不(bù)是(shì)說(shuō)非得(de¥δ≤)包裹,那(nà)隻能(néng)使用(yòng)第二種方法獲取控件(jiàn)中的(de)值

其中表單中的(de)switch,radio,checkbox中的(de)checked并不(bù)是(shì)必須的(de),可(kě)以填寫一(yī)個(gè)默>¥認初始值,進行(xíng)控制(zhì),在本文(wén)示例中,我是(shì)給了(le)一(↑∑yī)個(gè)初始值

在form表單中綁定了(le)bindsubmit事(shì)件(jiàn)方法'₽♥,它會(huì)攜帶form中的(de)數(shù)據觸發submit事(shì)件(jiàn)

同時(shí)form表單內(nèi)的(de)button按鈕中的(de)formType綁定了(le)submit事(shì)件(jiàn),它是(shì)用(yòng)于form表單組件(jiàn)提交的(de),會(huì)觸發form組件(jiàn)的(de)submit(提交表單)/reset(重置表單)事(shì)件(jiàn)

下(xià)面來(lái)看(kàn)看(kàn)邏輯代碼:

// pages/getformdata/getformdata.js
Page({
 ♣•§♦ /**
   * 頁面的(de)初始數(shù)據
  δ♦¥ */
  data: {
    inputVal: ♣ §β9;123',
  },

  /**
   * 生(shēng)命周期函數(shù)≠←σ--監聽(tīng)頁面加載
   */
 >
 
當你(nǐ)拿(ná)到(dào)表單中的(de)值,就(jiù)可(kě)以繼續 ✔後面的(de)操作(zuò),傳值,把對(duì)應的(de)字段提交₹ §給後台處理(lǐ),就(jiù)可(kě)以了(le)&¥§的(de)
 
優點: 傳統的(de)表單提交方式,通(tōng)過在表單控件(jiàn)內(nèiε∞§∞)設置name的(de)值,在表單統一(yī)提交時(shí),就(jiù)可(kě)以通(tōng)過event.detail.value拿(ná)到(dào)表單中各個(gè)表單組件(jiàn)的(de)值,代碼量少¥₩§→(shǎo),簡單
 
缺點: 處于form表單之外(wài)的(de)其他(tā)表單控件(jiàn)值是(shì)無法拿(ná)到(dàγ♦o)的(de),button按鈕頁必須要(yào)在form內(nèi),并且寫法固定
 
下(xià)面介紹一(yī)種非表單提交方式,也(yě)就(jiù)是(shì)不(bù)依賴form,同樣也(yě)可(kě)以獲取到(dào)表單組件Ωσ(jiàn)的(de)各個(gè)數(shù)值
 
這(zhè)種應用(yòng)場(chǎng)景在小(xiǎo)程序中是(shì)很(hěn¥®)常見(jiàn)的(de),表單提交數(shù)據,不(bù)一(yī)定就(jiù←☆₽Ω)非得(de)是(shì)button按鈕的(de)方式,隻要(yào)能(néng)拿(ná)到(dào)表單組件(jiàn¶φ)中的(de)值,就(jiù)達到(dào)目的(de)了(le)的(de)≠♦
 
非表單方式獲取表單組件(jiàn)的(de)值
 
下(xià)面是(shì)實例效果
 

 
以下(xià)是(shì)實例代碼,代碼與上(shàng)面類似,隻✔↕♦是(shì)稍微(wēi)更改了(le)一(yī)下(xià)
 
去(qù)除了(le)表單form,name屬性,在表單組件(jiàn)中新增了(le)bindchange方法
 
<!--pages/getformdata/getformdata.wxml--&φ  gt;
<view class="container">§"
  <view>
    <view>
      <view ×‍↓✔class="title">switch</vi≥δew>
      <switch checked b"©♦δindchange="handleSwi♠↔‍tch" />
    </view>
    ¶≈&<view>
      <view class↑$1;"title">radio</vΩβiew>
      <!-- radio-gro✘←>up是(shì)不(bù)能(néng)少(shǎo)的≠₩(de),否則就(jiù)會(huì)出問(wèn)題的(de),下(xià)面的(d↓βe)checkbox-group也(yě)是(shì) -->
    ×®×​  <radio-group bindchange="×∏‌ε;handleRadio">
        <label&g₹≤ t;<radio checked value="bo★¥y" />男(nán)</label>
        <lΩ≠¥abel><radio value="girl" /&π®↑gt;女(nǚ)</label>
      </radio-group&g‍Ω≠ t;
    </view>

    <<₹♠λview>
      <view class="title&#σ₩↕34;>checkbox</view>
      <checkbo¶  δx-group bindchange="handleC​←↑©heckBox">
        <label&g♥¥t;<checkbox checked value="itclanCode☆£∏r" />itclanCoder</label>
        &>↕<lt;label><checkbox value="γ 4;itclan" />itclan</label>
 ™∏φ♠     </checkbox-group>
    &l®✘§ t;/view>

    <view>
      <β∏¥view class="title">slider</view✘ ★>
      <slider
    ♣→    bindchange="hand  ♦leSlideChange"
        value="¥♥¶;{{sliderVal}}"
        show-™₽∑value
      ></slider>
    </v≠×↕γiew>
    <view>
      <in±¶±↑put
        bindinput="handleInputChanδ☆ge"
        class= σφ"input"
        value="★≠↕ ;{{inputVal}}"
        placeholder&‍★φ#61;"這(zhè)是(shì)一(yī)∑'個(gè)輸入框"
      />
    </view‍✔↑>
    <!-- 此處并非用(yòng)的(de)button按"∞&↔鈕,照(zhào)樣可(kě)以提交表單數(shù)據 --> ‍
    <view>
      <view class=&#∏β¶♣34;submitBtn" bindtap="hand♦≈★₽leSubmit">提交</view&←→gt;
    </view>
  </view>
↔₹₩</view>

 
當在switch,radio-group,checkbox-group,slider,input中添加了(le)bindchange方法,checked,input發生(shēng)改變時(shí)就(jiù)會(huì)觸發 change 事(shì)件(jiàn),然後通(tōng)過攜帶事(shì)件(jiàn)對(duì)象,拿(‌₹β•ná)到(dào)表單組件(jiàn)對(duì)應的(de)具體(tǐ)數(s♣₩§✘hù)值
 
如(rú)下(xià)代碼所示
 
// pages/getformdata/getformdata.js
Page({
  /*∑₩≠*
   * 頁面的(de)初始數(shù)據
   */
  dat ≠a: {
    switchVal: true, // switch默認初始化(huà)值
  ∏©¶  radioVal: 'boy', // ☆> radio初始化(huà)值,有(yǒu)時(shí)候男(nán)女(nα'♥ǚ),也(yě)可(kě)以用(yòng)1,0等表示男(nán),女(n¶&ǚ)的(de)
    checkboxVal: 'itcla✘♦nCoder', // checkbox初始化(huà)值
    slider®↓£Val: 30,
    inputVal: &♦9;123', // 輸入框初始化(huà)值
  },

  /**
   *€ε 生(shēng)命周期函數(shù)--監聽(tīng)±↑頁面加載
   */
 >(打開(kāi)小(xiǎo)程序-愛(ài)的(de)鼓勵Ω<頁面中的(de)表單用(yòng)的(de)就(jiù)是(shì)非fo₹∏rm提交方式)

 
總結
 
全文(wén)總結兩段話(huà)就(jiù)是(shì):
 
小(xiǎo)程序中獲取表單組件(jiàn)的(de)值有₩'→π(yǒu)兩種方式,一(yī)種是(shì)通(tōng)過傳統的(de)‍¶πform結合button組合的(de)方式,這(zh↑≠γè)種方式有(yǒu)局限性,所有(yǒu)的(de)表單組♦γ件(jiàn)都(dōu)需要(yào)在form內(nèi),通(✔↔tōng)過在表單組件(jiàn)內(nèi)設置name&♠‍λ值的(de)方式獲取表單組件(jiàn)中的(de)值δΩ♣π(必須要(yào)設置,否則拿(ná)到(dào)表單組件(j€÷iàn)的(de)值就(jiù)是(shì)`undefine&>d`)
另一(yī)種是(shì)非表單form提交數(shù)據的(de)方式是(shì)通(tōng)過在表單組件(jiàn)上₹→±(shàng)綁定bindchange事(shì)件(jiàn),通(tōnβ≤₽÷g)過事(shì)件(jiàn)對(duì)象的(de® ≈)方式,獲取event.detail.value的(de)方式即可(kě)拿(ná)到(dào),但(dàn)同時(shí)犧牲性能(néng)為(wèi)代價,需要(yào)觸發↔≈>♦setData,從(cóng)而在最終提交表單時(shí),拿(ná)到(d ©φào)具體(tǐ)的(de)表單數(shù)值
 
相(xiàng)關參考文(wén)檔
 
form 表單組件(jiàn)https://develope ↑rs.weixin.qq.com/miniprogram/dev/co‍​©mponent/form.html
 
記賬就(jiù)用(yòng)輕記賬
 

 


 
公衆号（ID：itclanCoder）
 
碼能(néng)讓您早脫菜籍，文(wén)能(néng)讓您洗淨鉛華
 
  可(kě)能(néng)您還(hái)想看(kàn)更多(duō‍★≈♣)：
 

 
小(xiǎo)程序-雲開(kāi)發-實現(xiàn)生(shēng)成小(x§<§€iǎo)程序碼
 


 
Js篇-面試題12-如(rú)何解析 URL 提取 params 參數(shù)
 


 
Js篇-面試題11-比較下(xià)for..of與for→↕§..in的(de)區(qū)别
 

 
Js篇-面試題9-請(qǐng)說(shuō)一(yī)下(xià)Js中的(de)事(s✔←®hì)件(jiàn)循環機(jī)制(zhì)
 

 
vuepress建站(zhàn)過程中遇到(dào)的(de)一(yī)些(xiē)問(w←×èn)題