【微信小程序-原生开发】实用教程19 - 表单范例 VS 表单校验（含必填校验函数封装，实时数字校验）_微信小程序表单校验

在表单开发中，最常见的即必填校验和数字校验

必填校验

当字段较多时，为了优化代码，将必填校验进行封装

必填校验函数封装 utils\form.js

export function formRequiredValid(formRule, formData) {
  let result = true
  let obj = formRule

  obj[Symbol.iterator] = function* () {
    let keys = Object.keys(obj);
    for (let k of keys) {
      yield [k, obj[k]];
    }
  };

  for (let [k, v] of obj) {
    if (!formData[k]) {
      wx.showToast({
        icon: 'none',
        title: `${v}不能为空`,
      })
      result = false
      break
    }
  }
  return result
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

使用范例

import {
  formRequiredValid
} from '../../../../utils/form.js'
1
2
3

  save: function () {
    let formRule = {
      title: "标题",
      date: "日期",
      time: "时间",
      placeInfo: "地点",
    }

    if (!formRequiredValid(formRule, this.data.formData)) {
      return
    }
    //  此处省略数据库的保存逻辑
 }
1
2
3
4
5
6
7
8
9
10
11
12
13

实时数字校验

数字类数据，需实时进行数据类型校验，如

<t-input clearable bindclear="inputChange" bindchange="inputChange" data-prop='maxNum' value="{{formData.maxNum}}" type="number" label="人数：" placeholder="请输入最大报名人数" suffix="人" align="right" t-class-tips="tips" tips="{{formError.maxNum ? '请输入数字' : ''}}" />

<t-input clearable bindclear="inputChange" bindchange="inputChange" data-prop='cost' value="{{formData.cost}}" type="number" label="费用：" placeholder="请输入人均费用" suffix="元/人" align="right" t-class-tips="tips" tips="{{formError.cost ? '请输入数字' : ''}}" />
1
2
3

    // 表单校验报错
    formError: {},
1
2

  inputChange: function (e) {
    let prop = e.currentTarget.dataset.prop
    let value = e.detail.value || '' //清空表单时，触发更新，避免清空时修改无效
    this.data.formData[prop] = value
    if (prop === 'date') {
      this.data.formData.week = getWeek(value)
    }
    // 对特殊字段进行正则校验
    if (prop === 'cost' || prop === 'maxNum') {
      const isNumber = value ? /^\d+(\.\d+)?$/.test(value) : true;
      this.data.formError[prop] = !isNumber
      this.setData({
        formError: this.data.formError
      });
      if (value && isNumber) {
        // 将数据格式化为数字
        this.data.formData[prop] = Number(value)
      }
    }
    this.setData({
      formData: this.data.formData
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// 保存时, 校验是否通过数据校验
    if (Object.values(this.data.formError).includes(true)) {
      wx.showToast({
        icon: 'error',
        title: '未通过数据校验',
      })
      return
    }
1
2
3
4
5
6
7
8

其他实时校验

参考实时数字校验，修改对应的正则表达式即可，如邮箱校验，手机号校验等。