背景

在小程序開(kāi)發(fā)中,經(jīng)常有用到表單,我們往往需要在小程序端獲取用戶表單輸入框中的值(通常用戶輸入的有:switch,input,checkbox,slider,radio,picker)等,通過(guò)觸發(fā)事件,然后提交給后端處理

那么在小程序當(dāng)中有哪些方式可以獲取到表單中的值呢,又怎么通過(guò)非表單提交的方式獲取用戶輸入框中的值呢

換言之,若提交按鈕在form之外,又如何實(shí)現(xiàn)表單的提交呢

在小程序中有兩種方式可以獲取表單的值

form 表單獲取表單組件的值

這是最普遍通用的一種方法,所有用戶輸入的組件放置在form內(nèi),當(dāng)點(diǎn)擊form表單中form-type為submit的button組件時(shí)

它會(huì)將表單組件中的value值進(jìn)行提交,但此時(shí)需要在表單組件中加上name來(lái)作為key

如下 UI 所示:

以下是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;
}
復(fù)制代碼

在上面的示例代碼中,你會(huì)發(fā)現(xiàn)當(dāng)有多個(gè)radio,多個(gè)checkbox時(shí),它會(huì)被包裹在radio-group,checkbox-group中,不然是無(wú)法獲取到控件中的具體數(shù)值的,當(dāng)然也不是說(shuō)非得包裹,那只能使用第二種方法獲取控件中的值

其中表單中的switch,radio,checkbox中的checked并不是必須的,可以填寫(xiě)一個(gè)默認(rèn)初始值,進(jìn)行控制,在本文示例中,我是給了一個(gè)初始值

在form表單中綁定了bindsubmit事件方法,它會(huì)攜帶form中的數(shù)據(jù)觸發(fā)submit事件

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

下面來(lái)看看邏輯代碼:

// pages/getformdata/getformdata.js
Page({
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    inputVal: '123',
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  onLoad: function(options) {},
  // 表單提交
  formSubmit(event) {
    console.log(event); // event.detail.value就可以拿到具體表單中的值
    const {
      switchChecked,
      radio,
      checkbox,
      slider,
      input,
    } = event.detail.value; // 解構(gòu)
    console.log(switchChecked, radio, checkbox, slider, input); // true "boy" ["itclanCoder"] 50 "123"
  },
});
復(fù)制代碼

以上通過(guò)form表單,獲取表單中控件的值,是通過(guò)在switch,radio-group,checkbox-group,slider,input組件中添加name屬性,從而通過(guò)button中的formType結(jié)合form的bindsubmit事件,就可以統(tǒng)一的拿到表單組件中的值

優(yōu)點(diǎn): 傳統(tǒng)的表單提交方式,通過(guò)在表單控件內(nèi)設(shè)置name的值,在表單統(tǒng)一提交時(shí),就可以通過(guò)event.detail.value拿到表單中各個(gè)表單組件的值,代碼量少,簡(jiǎn)單

缺點(diǎn): 處于form表單之外的其他表單控件值是無(wú)法拿到的,button按鈕頁(yè)必須要在form內(nèi),并且寫(xiě)法固定

下面介紹一種非表單提交方式,也就是不依賴form,同樣也可以獲取到表單組件的各個(gè)數(shù)值

這種應(yīng)用場(chǎng)景在小程序中是很常見(jiàn)的,表單提交數(shù)據(jù),不一定就非得是button按鈕的方式,只要能拿到表單組件中的值,就達(dá)到目的了的

非表單方式獲取表單組件的值

下面是實(shí)例效果

以下是實(shí)例代碼,代碼與上面類(lèi)似,只是稍微更改了一下

去除了表單form,name屬性,在表單組件中新增了bindchange方法

當(dāng)在switch,radio-group,checkbox-group,slider,input中添加了bindchange方法,checked,input發(fā)生改變時(shí)就會(huì)觸發(fā) change 事件,然后通過(guò)攜帶事件對(duì)象,拿到表單組件對(duì)應(yīng)的具體數(shù)值

如下代碼所示

// pages/getformdata/getformdata.js
Page({
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    switchVal: true, // switch默認(rèn)初始化值
    radioVal: 'boy', // radio初始化值,有時(shí)候男女,也可以用1,0等表示男,女的
    checkboxVal: 'itclanCoder', // checkbox初始化值
    sliderVal: 30,
    inputVal: '123', // 輸入框初始化值
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  onLoad: function(options) {},

  // switch中的值
  handleSwitch(event) {
    console.log(event);
    const switchVal = event.detail.value;
    this.setData({
      // 通過(guò)setData更改數(shù)據(jù)
      switchVal,
    });
  },

  // 觸發(fā)readio
  handleRadio(event) {
    console.log(event);
    const radio = event.detail.value;
    this.setData({
      radioVal: radio,
    });
  },

  // 觸發(fā)checkbox
  handleCheckBox(event) {
    console.log(event);
    const checkbox = event.detail.value;
    this.setData({
      checkboxVal: checkbox,
    });
  },

  // 觸發(fā)slideChange
  handleSlideChange(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"
  },
});
復(fù)制代碼

以上就是通過(guò)非表單提交的方式獲取表單組件中的值,此方法不局限于form表單,比較靈活,先初始化表單,然后給表單組件綁定bindchange事件,當(dāng)表單組件checked,或input發(fā)生改變時(shí),就會(huì)觸發(fā)change事件,然后通過(guò)事件對(duì)象就可以拿到表單組件的值

在bindchange事件的方法內(nèi),重新setData一次數(shù)據(jù)就可以了的

優(yōu)點(diǎn):非表單form,button組合方式方式提交數(shù)據(jù),比較靈活(在表單form之外也能提交數(shù)據(jù))

缺點(diǎn): 需要添加綁定bindchange事件,需要觸發(fā)setData,但頻繁的觸發(fā)setData是比較消耗性能,在表單組件不是很多的情況下,可以選用此方式的

這個(gè)是有應(yīng)用場(chǎng)景的,比如:如下小程序中我的頁(yè)面中,的就是用非表單方式提交數(shù)據(jù)的

注意

傳統(tǒng)form提交數(shù)據(jù)時(shí),必須要設(shè)置name來(lái)作為key,否則就拿不到表單組件中的值,而非form表單形式提交數(shù)據(jù),需要給表單組件綁定bindchang,通過(guò)事件對(duì)象的方式獲取組件中的數(shù)據(jù)

這個(gè)是有應(yīng)用場(chǎng)景的,比如:如下小程序中我的頁(yè)面中,的就是用非表單方式提交數(shù)據(jù)的

總結(jié)

全文總結(jié)兩段話就是:

1. 小程序中獲取表單組件的值有兩種方式,一種是通過(guò)傳統(tǒng)的form結(jié)合button組合的方式,這種方式有局限性,所有的表單組件都需要在form內(nèi),通過(guò)在表單組件內(nèi)設(shè)置name值的方式獲取表單組件中的值(必須要設(shè)置,否則拿到表單組件的值就是undefined)
2. 非表單form提交數(shù)據(jù)的方式是通過(guò)在表單組件上綁定bindchange事件,通過(guò)事件對(duì)象的方式,獲取event.detail.value的方式即可拿到,但同樣犧牲性能為代價(jià),需要觸發(fā)setData,從而在最終提交表單時(shí),拿到具體的表單數(shù)值