背景

在小程序開發中(zhōng),經常有用到表單,我們往往需要在小程序端獲取用戶表單輸入框中(zhōng)的值(通(tōng)常用戶輸入的有:switch,input,checkbox,slider,radio,picker)等,通(tōng)過觸發事件,然後提交給後端處理

那麼在小程序當中(zhōng)有哪些方式可(kě)以獲取到表單中(zhōng)的值呢(ne),又怎麼通(tōng)過非表單提交的方式獲取用戶輸入框中(zhōng)的值呢(ne)

換言之,若提交按鈕在form之外,又如(rú)何實現表單的提交呢(ne)

在小程序中(zhōng)有兩種方式可(kě)以獲取表單的值

form 表單獲取表單組件的值

這是最普遍通(tōng)用的一種方法,所有用戶輸入的組件放置在form内,當點擊form表單中(zhōng)form-type為submit的button組件時

它會将表單組件中(zhōng)的value值進行提交,但此時需要在表單組件中(zhōng)加上name來作為key

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

以下(xià)是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;
}
複制代碼

在上面的示例代碼中(zhōng),你(nǐ)會發現當有多個(gè)radio,多個(gè)checkbox時,它會被包裹在radio-group,checkbox-group中(zhōng),不然是無法獲取到控件中(zhōng)的具體數值的,當然也不是說非得包裹,那隻能使用第二種方法獲取控件中(zhōng)的值

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

在form表單中(zhōng)綁定了bindsubmit事件方法,它會攜帶form中(zhōng)的數據觸發submit事件

同時form表單内的button按鈕中(zhōng)的formType綁定了submit事件,它是用于form表單組件提交的,會觸發form組件的submit(提交表單)/reset(重置表單)事件

下(xià)面來看看邏輯代碼:

// pages/getformdata/getformdata.js
Page({
  /**
   * 頁面的初始數據
   */
  data: {
    inputVal: '123',
  },

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

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

當你(nǐ)拿到表單中(zhōng)的值,就可(kě)以繼續後面的操作,傳值,把對應的字段提交給後台處理,就可(kě)以了的

優點: 傳統的表單提交方式,通(tōng)過在表單控件内設置name的值,在表單統一提交時,就可(kě)以通(tōng)過event.detail.value拿到表單中(zhōng)各個(gè)表單組件的值,代碼量少(shǎo),簡單

缺點: 處于form表單之外的其他表單控件值是無法拿到的,button按鈕頁必須要在form内,并且寫法固定

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

這種應用場景在小程序中(zhōng)是很常見的,表單提交數據,不一定就非得是button按鈕的方式,隻要能拿到表單組件中(zhōng)的值,就達到目的了的

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

下(xià)面是實例效果

以下(xià)是實例代碼,代碼與上面類似,隻是稍微更改了一下(xià)

去除了表單form,name屬性,在表單組件中(zhōng)新增了bindchange方法

當在switch,radio-group,checkbox-group,slider,input中(zhōng)添加了bindchange方法,checked,input發生改變時就會觸發 change 事件,然後通(tōng)過攜帶事件對象,拿到表單組件對應的具體數值

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

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

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

  // switch中(zhōng)的值
  handleSwitch(event) {
    console.log(event);
    const switchVal = event.detail.value;
    this.setData({
      // 通(tōng)過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輸入框的值
  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"
  },
});
複制代碼

以上就是通(tōng)過非表單提交的方式獲取表單組件中(zhōng)的值,此方法不局限于form表單,比較靈活,先初始化表單,然後給表單組件綁定bindchange事件,當表單組件checked,或input發生改變時,就會觸發change事件,然後通(tōng)過事件對象就可(kě)以拿到表單組件的值

在bindchange事件的方法内,重新setData一次數據就可(kě)以了的

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

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

這個(gè)是有應用場景的,比如(rú):如(rú)下(xià)小程序中(zhōng)我的頁面中(zhōng),的就是用非表單方式提交數據的

注意

傳統form提交數據時,必須要設置name來作為key,否則就拿不到表單組件中(zhōng)的值,而非form表單形式提交數據,需要給表單組件綁定bindchang,通(tōng)過事件對象的方式獲取組件中(zhōng)的數據

這個(gè)是有應用場景的,比如(rú):如(rú)下(xià)小程序中(zhōng)我的頁面中(zhōng),的就是用非表單方式提交數據的

總結

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

1. 小程序中(zhōng)獲取表單組件的值有兩種方式,一種是通(tōng)過傳統的form結合button組合的方式,這種方式有局限性,所有的表單組件都需要在form内,通(tōng)過在表單組件内設置name值的方式獲取表單組件中(zhōng)的值(必須要設置,否則拿到表單組件的值就是undefined)
2. 非表單form提交數據的方式是通(tōng)過在表單組件上綁定bindchange事件,通(tōng)過事件對象的方式,獲取event.detail.value的方式即可(kě)拿到,但同樣犧牲性能為代價,需要觸發setData,從而在最終提交表單時,拿到具體的表單數值