微信小程序實戰：表單與選擇控件的結合

先上代碼。

 

login.wxml

<mp-toptips msg="{{error}}" type="error" show="{{error}}"></mp-toptips>

<view class="page-body">
  <mp-form id="form" rules="{{rules}}" models="{{formData}}">
    <mp-cells title="信息綁定" >
      <mp-cell prop="name" title="姓名" ext-class="cell" >
          <input bindinput="formInputChange" data-field="name" class="weui-input"/>
      </mp-cell>
      <mp-cell prop="phone" title="手機號" ext-class="cell" >
          <input bindinput="formInputChange" data-field="phone" class="weui-input"/>
      </mp-cell>
      <mp-cell prop="company" title="單位名稱" ext-class="cell" >
        <picker bindchange="bindPickerChange1" value="{{company}}" range="{{companyArray}}" range-key="name">
          <view class="picker">
            {{formData['company'] ? companyArray[company].name : '請選擇'}}
            <input hidden data-field="company" value="{{formData['company'] ? companyArray[company].name : '請選擇'}}" class="weui-input"/> 
          </view>
        </picker>
      </mp-cell> 

      
    </mp-cells>
  </mp-form>

  <view class="weui-btn-area">
      <button class="weui-btn" type="primary" bindtap="submitForm">確定</button>
  </view>
</view>

login.wxss

.cell .weui-cell__hd{
  width:200rpx;
}

login.js

// pages/login/login.js

const app = getApp()

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    // 單位
    company:0,
    companyArray:[
      {
        id:0,
        name:'a'
      },
      {
        id:1,
        name: 'b'
      }
    ],
    rules: [{
      name: 'name',
      rules: { required: true, message: '姓名必填' },
    }, {
      name: 'phone',
      rules: [{ required: true, message: '手機號必填' }, { mobile: true, message: '手機號格式不對' }],
    }, {
      name: 'company',
      rules: { required: true, message: '單位名稱必填' },
    }],
    formData:{}
  },

  formInputChange(e) {
    const { field } = e.currentTarget.dataset
    this.setData({
      [`formData.${field}`]: e.detail.value
    })
  },
  bindPickerChange1: function (e) {
    this.setData({
      company: e.detail.value,
      [`formData.company`]: e.detail.value
    })
  },

  submitForm() {
    // console.log(this.selectComponent('#form'))
    this.selectComponent('#form').validate((valid, errors) => {
      // console.log('valid', valid, errors)
      if (!valid) {
        const firstError = Object.keys(errors)
        if (firstError.length) {
          this.setData({
            error: errors[firstError[0]].message
          })

        }
      } else {
        // wx.showToast({
        //   title: '校驗通過'
        // })
        // console.log(this.data.formData)
        wx.showToast({
          title: '綁定成功'
        })
        try {
          // 同步接口立即寫入
          wx.setStorageSync('user', JSON.stringify(this.data.formData))
          let token = wx.getStorageSync('user')
          // console.log(token)
          if (typeof app.globalData.haveToken === "boolean") {
            app.globalData.haveToken = true
            app.globalData.reloadFlag = true
          }
          // console.log(app.globalData.haveToken)
          wx.switchTab({
            url: '../index/index'
          })
        } catch (e) {
          console.log('寫入value2發生錯誤')
        }
      }   
    })
  }
})

 

picker 是小程序自帶的組件，類似於select，選擇控件。

mp-* 是WeUI 的組件，使用之前需要在json文件中引入。

login.json

{
  "component": true,
  "usingComponents": {
    "mp-toptips": "../../weui-miniprogram/toptips/toptips",  // 懸浮提示
    "mp-cell": "../../weui-miniprogram/cell/cell",  // 布局用的
    "mp-cells": "../../weui-miniprogram/cells/cells",  // 布局用的，依賴 cell
    "mp-form": "../../weui-miniprogram/form/form"  // 表單，表單驗證需要
  }
}

 

---

 

下面是細節分析。

<mp-cell prop="company" title="單位名稱" ext-class="cell" >
        <picker bindchange="bindPickerChange1" value="{{company}}" range="{{companyArray}}" range-key="name">
          <view class="picker">
            {{formData['company'] ? companyArray[company].name : '請選擇'}}
            <input hidden data-field="company" value="{{formData['company'] ? companyArray[company].name : '請選擇'}}" class="weui-input"/> 
          </view>
        </picker>
      </mp-cell> 

formData是存表單數據的，默認空對象。

一開始的時候肯定是沒有值的，所以選之前都會提示 請選擇。

只要選過了，就有值了，表單驗證就能通過，否則不能通過。

隱藏的輸入框是配合表單的，可能不需要。

bindPickerChange1: function (e) {
    this.setData({
      company: e.detail.value,
      [`formData.company`]: e.detail.value
    })
  },

對應的change 方法。

set 了兩個值，一個是顯示用的，一個是表單用的。

submitForm() {
    // console.log(this.selectComponent('#form'))
    this.selectComponent('#form').validate((valid, errors) => {
      // console.log('valid', valid, errors)
      if (!valid) {
        const firstError = Object.keys(errors)
        if (firstError.length) {
          this.setData({
            error: errors[firstError[0]].message
          })

        }
      } else {
        // wx.showToast({
        //   title: '校驗通過'
        // })
        // console.log(this.data.formData)
        wx.showToast({
          title: '綁定成功'
        })
        try {
          // 同步接口立即寫入
          wx.setStorageSync('user', JSON.stringify(this.data.formData))
          let token = wx.getStorageSync('user')
          // console.log(token)
          if (typeof app.globalData.haveToken === "boolean") {
            app.globalData.haveToken = true
            app.globalData.reloadFlag = true
          }
          // console.log(app.globalData.haveToken)
          wx.switchTab({
            url: '../index/index'
          })
        } catch (e) {
          console.log('寫入value2發生錯誤')
        }
      }   
    })
  }

表單驗證方法。

校驗規則是 this.data.rules.

this.data.rules 會和 this.data.formData 進行比對，如果rule里面相應值 formData沒有就會校驗失敗，這是最簡單的非空校驗。

更復雜的校驗在rules[index].rules數組中可以加對象，里面的每一個對象都會去驗證。

 

以上。