在表单开发中，最常见的即必填校验和数字校验
必填校验
当字段较多时，为了优化代码，将必填校验进行封装
必填校验函数封装 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 }
使用范例
import { formRequiredValid } from '../../../../utils/form.js'
save: function () { let formRule = { title: "标题", date: "日期", time: "时间", placeInfo: "地点", } if (!formRequiredValid(formRule, this.data.formData)) { return } // 此处省略数据库的保存逻辑 }
实时数字校验
数字类数据，需实时进行数据类型校验，如
<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 ? '请输入数字' : ''}}" />
// 表单校验报错 formError: {},
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 }) },
// 保存时, 校验是否通过数据校验 if (Object.values(this.data.formError).includes(true)) { wx.showToast({ icon: 'error', title: '未通过数据校验', }) return }
其他实时校验
参考实时数字校验，修改对应的正则表达式即可，如邮箱校验，手机号校验等。
