背景

在小(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)哪些('ε$©xiē)方式可(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 所示:

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

/* pages/getformdata/getformd→λata.wxss */
.container {
  padding:♦←↑  15rpx 40rpx;
}

.title ∞γ≥{
  margin: 20rpx 0;
}

label {
  margin-αλright: 50rpx;
}

.input {
  bor ×₩≥der-bottom: 1px solid #abcdef;
}

.&‍submitBtn {
  margin-top: 40rpx;
}

button₩™φ:not([size='mini']) {
  width: 100% !im•↓portant;
}
複制(zhì)代碼

在上(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
Pa®×γge({
  /**
   * 頁面的(de)初始數(shù)據
   */
↕   data: {
    inputVal: '123',
δ≥∞≠  },

  /**
   * 生(shēng)命周期函數(shù)--監聽(tīn×£♥δg)頁面加載
   */
  onLoad: function(options) {},
 σ  // 表單提交
  formSubmit(event) {±Ω≤ 
    console.log(event); ±>// event.detail.value就(jiù)可(kě)以™♠₹拿(ná)到(dào)具體(tǐ)表單中的(de)值
    const ★∞÷{
      switchChecked,
   ≤÷λ   radio,
      checkbox,
      slider÷¶★,
      input,
    } = event.detail.val★→×ue; // 解構
    console.log(switchChecked, radiφγ®★o, checkbox, slider, input); // true "b≈ oy" ["itclanCoder"] 50 "123"
  },
})≈♦÷;
複制(zhì)代碼

以上(shàng)通(tōng)過form表單,獲取表單中控件(jiàn)的(de)值,是(shì)通(tōng)過在switch,radio-group,checkbox-group,slider,input組件(jiàn)中添加name屬性,從(cóng)而通(tōng)過button中的(de)formType結合form的(de)bindsubmit事(shì)件(jiàn),就(jiù)可(kě)以統一(yī)的(de)拿(∑&‍ná)到(dào)表單組件(jiàn)中的(de)值

當你(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)中的(d÷​​δe)值,就(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方法

當在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ǐ)數(₩αshù)值

如(rú)下(xià)代碼所示

// pages/getformdata/getformdata.js≈ & 
Page({
  /**
   * 頁面的(de)初始≥≥₽數(shù)據
   */
  data: {
    switchVש€al: true, // switch默認初始化(hπλ×uà)值
    radioVal: 'boy', //₹±λ↑ radio初始化(huà)值,有(yǒu)時(shí)候男(nán)女(nǚ),也(yě ∑ •)可(kě)以用(yòng)1,0等表示男(nán),女(nǚ)的(de)
    c∑§γheckboxVal: 'itclanCoder', // checkbox初始化(₽↕huà)值
    sliderVal: 30,
    inputVal: '123',¶©☆₽ // 輸入框初始化(huà)值
  },

  /<π✘**
   * 生(shēng)命周期函數(shù)--監聽(tīng)頁面加載
   */​§®ε
  onLoad: function(options) {₽δ$},

  // switch中的(de)值
  handleSwitch(event) ¥δ{
    console.log(event);
    const switchVa ‍★l = event.detail.value;
    this.setData({
δ‍✔      // 通(tōng)過setData更改數(shùΩ ↔)據
      switchVal,
    });
 ε$ },

  // 觸發readio
  handleR$±<♣adio(event) {
    console.log(event♦☆∑);
    const radio = event.detail.value;
    δ•∞→this.setData({
      radioVal: radio✘©∑>,
    });
  },

  // 觸發checkbox
  handleChec✔±kBox(event) {
    console.log(eveδ≈™nt);
    const checkbox = eve™ε∞©nt.detail.value;
    this.se×₽tData({
      checkboxVal: checkboα♦‍∏x,
    });
  },

  // 觸發slideChange
 "λ×✔ handleSlideChange(event) {
  ♠€•  console.log(event);
    co'& nst sliderVal = event.detail.value;
↕"↑
    this.setData({
      sliderVa≤$₽×l: sliderVal,
    });
  },

  // input ‍輸入框的(de)值
  handleInputChange(eφαβvent) {
    console.log(event);
    cons↕$↔÷t inputVal = event.detail.value;
    this.se☆&tData({
      inputVal: inputVal,
    });
₩¶₩  },

  // 表單提交
  handleSubmi ♣t() {
    console.log(
      t≥≠>±his.data.switchVal,
      this.data.rγ>✘adioVal,
      this.data.checkboxVal,₹‍≥α
      this.data.sliderVal,
      this.da₹¶∏ta.inputVal
    ); // true "boy" "itclanCod‌→"er" 30 "123"
  },
});
複制(zhì)代碼

以上(shàng)就(jiù)是(shì)通(tōng)過非表單提交的(de)方式獲取表單♥₩✔₽組件(jiàn)中的(de)值,此方法不(bù)局限于 ↓form表單,比較靈活,先初始化(huà)表單,然後給表單組件(j©•<≠iàn)綁定bindchange事(shì)件(jiàn),當表單組件(jiàn)checked,或input發生(shēng)改變時(shí),就(jiù)會(huì)觸發change事(shì)件(jiàn),然後通(tōng)過事(shì)件(jiàn)對(duì)象就✘☆•₽(jiù)可(kě)以拿(ná)到(dào)表單組件(jiàn)的(×☆de)值

在bindchange事(shì)件(jiàn)的(de)方法內(nèi),重新setData一(yī)次數(shù)據就(jiù)可(kě)以了(le)的÷©≠(de)

優點:非表單form,button組合方式方式提交數(shù)據,比較靈活(在∏σ≤表單form之外(wài)也(yě)能(néng)提交數(shù)據)

缺點: 需要(yào)添加綁定bindchange事(shì)件(jiàn),需要(yào)觸發setData,但(dàn)頻(pín)繁的(de)觸發setData是(shì)比較消耗性能(néng),在表單組件(jiàn)不 ≤(bù)是(shì)很(hěn)多(duō)的(de)情況下(xià),可(kě)以選用(y•®©òng)此方式的(de)

這(zhè)個(gè)是(shì)有(yǒu)應用(yòng)場✘​(chǎng)景的(de),比如(rú):如(rú)下(xià×∑←)小(xiǎo)程序中我的(de)頁面中,的(de)就(ji€£ù)是(shì)用(yòng)非表單方式提交數(shù)據的(de)

注意

傳統form提交數(shù)據時(shí),必須要(yào)設置name來(lái)作(zuò)為(wèi)key,否則就(jiù)拿(ná)不(bù)到(dào)表單組件(jiàn)中的(de)值,'™而非form表單形式提交數(shù)據,需要(yào)給表單組件(jiàn)綁定bindchang,通(tōng)過事(shì)件(jiàn)對(duì)象的(de)方式獲取組件(j≠≈iàn)中的(de)數(shù)據

這(zhè)個(gè)是(shì)有(yǒu)應用(yòng)場​§(chǎng)景的(de),比如(rú):如(rú)下(xià)小(xiǎo)程序中我的(de←&÷≥)頁面中,的(de)就(jiù)是(shì)用(yòng)非表單方式提交數(shù)據的(dα¥ εe)

總結

全文(wén)總結兩段話(huà)就(jiù)是(shì):

1. 小(xiǎo)程序中獲取表單組件(jiàn)的(de)值有(≤ππ™yǒu)兩種方式,一(yī)種是(shì)通(tōng)過傳統的(de)form結合but≠•♠ton組合的(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ì)undefined)β ÷&
2. 非表單form提交數(shù)據的(de)方式是(shì)通(tōng≥↓"')過在表單組件(jiàn)上(shàng)綁定bindchange事(shì)件(jiàn♦☆∑×),通(tōng)過事(shì)件(jiàn)對(duì)象的(de)方式,獲取event.detail.value的(de)方式即可(kě)拿(ná)到(dào),但(dàn)®∏同樣犧牲性能(néng)為(wèi)代價,需要(yào)觸發setData,從(cóng)而在最®ε終提交表單時(shí),拿(ná)到(dào)具體(tǐ)的(de)表單數(s☆σ∞•hù)值