背景

在(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 所示:

以(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',
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function(options) {},
  // 表單提交
  formSubmit(event) {
    console.log(event); // event.detail.value就(jiù)可以(yǐ)拿到(dào)具體表單中的(de)值
    const {
      switchChecked,
      radio,
      checkbox,
      slider,
      input,
    } = event.detail.value; // 解構
    console.log(switchChecked, radio, checkbox, slider, input); // true "boy" ["itclanCoder"] 50 "123"
  },
});
複制代碼

以(yǐ)上(shàng)通過form表單,獲取表單中控件的(de)值,是(shì)通過在(zài)switch,radio-group,checkbox-group,slider,input組件中添加name屬性,從而(ér)通過button中的(de)formType結合form的(de)bindsubmit事件,就(jiù)可以(yǐ)統一的(de)拿到(dào)表單組件中的(de)值

當你拿到(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方法

當在(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', // 輸入框初始化值
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function(options) {},

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

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

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

  // 觸發slideChange
  handleSlideChange(event) {
    console.log(event);
    const sliderVal = event.detail.value;
    this.setData({
      sliderVal: sliderVal,
    });
  },

  // input輸入框的(de)值
  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"
  },
});
複制代碼

以(yǐ)上(shàng)就(jiù)是(shì)通過非表單提交的(de)方式獲取表單組件中的(de)值,此方法不(bù)局限于(yú)form表單,比較靈活,先初始化表單,然後給表單組件綁定bindchange事件,當表單組件checked,或input發生改變時(shí),就(jiù)會觸發change事件,然後通過事件對象就(jiù)可以(yǐ)拿到(dào)表單組件的(de)值

在(zài)bindchange事件的(de)方法内,重新setData一次數據就(jiù)可以(yǐ)了(le／liǎo)的(de)

優點:非表單form,button組合方式方式提交數據,比較靈活(在(zài)表單form之(zhī)外也(yě)能提交數據)

缺點: 需要(yào / yāo)添加綁定bindchange事件,需要(yào / yāo)觸發setData,但頻繁的(de)觸發setData是(shì)比較消耗性能,在(zài)表單組件不(bù)是(shì)很多的(de)情況下,可以(yǐ)選用此方式的(de)

這(zhè)個(gè)是(shì)有應用場景的(de),比如:如下小程序中我的(de)頁面中,的(de)就(jiù)是(shì)用非表單方式提交數據的(de)

注意

傳統form提交數據時(shí),必須要(yào / yāo)設置name來(lái)作爲(wéi / wèi)key,否則就(jiù)拿不(bù)到(dào)表單組件中的(de)值,而(ér)非form表單形式提交數據,需要(yào / yāo)給表單組件綁定bindchang,通過事件對象的(de)方式獲取組件中的(de)數據

這(zhè)個(gè)是(shì)有應用場景的(de),比如:如下小程序中我的(de)頁面中,的(de)就(jiù)是(shì)用非表單方式提交數據的(de)

總結

全文總結兩段話就(jiù)是(shì):

1. 小程序中獲取表單組件的(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)
2. 非表單form提交數據的(de)方式是(shì)通過在(zài)表單組件上(shàng)綁定bindchange事件,通過事件對象的(de)方式,獲取event.detail.value的(de)方式即可拿到(dào),但同樣犧牲性能爲(wéi / wèi)代價,需要(yào / yāo)觸發setData,從而(ér)在(zài)最終提交表單時(shí),拿到(dào)具體的(de)表單數值