uniapp 单表、多级动态表单添加validateFunction自定义规则

uniapp 多级动态表单添加自定义规则

在uniapp制作小程序时，当涉及到需要设置validateFunction的校验规则时。可能遇到的问题

1、validateFunction不生效，没有触发
2、多层级表单怎么添加validateFunction自定义校验规则

本文将以单表单校验和多表单校验分类描述

单表单自定义规则校验

要注意的是：

1、去掉：rules=“rules”,因为表单再校验时validateFunction会不执行
2、本文中photoList是自定义组件，主要结构为数组，可按照自己的需求填写
3、须在onReady()内设置规则、

    <template><uni-forms ref="baseForm" :modelValue="baseFormData" label-position="left" label-width="150rpx"><uni-forms-item label="现场拍照" required name="imageList"><photoList v-model="baseFormData.imageList" limit="9"></photoList></uni-forms-item></uni-forms><u-button class="button" type="primary" shape="circle" @click="submit('baseForm')">提交</u-button>
</template>
<script>
export default {data() {return {dynamicRules: {imageList: {rules: [{required: true,errorMessage: '最少一张图片'}, {validateFunction: (rule, value, data, callback) => {// 异步需要返回 Promise 对象return new Promise((resolve, reject) => {setTimeout(() => {//按照自己的需要填写}, 500)})}}]},}}，onReady() {/* 这里，我们通过refs拿到增加的内容，然后setRules */this.$refs.baseForm.setRules(this.dynamicRules)},methods:{// 提交submit(ref) {this.$refs[ref].validate().then(res => {}).catch(err => {this.$modal.alert(err[0].errorMessage)})},}
}
</script>

多层级表单规则校验

要注意的是：

1、多层级表单与单层级外部校验相同，不同的是需要在新增子项或者原表单中有子项遍历时，先渲染，后添加规则。
2、给子项uni-from-item组件添加ref用于判断校验位置。

<template><uni-forms ref="baseForm" :modelValue="baseFormData" label-position="left" label-width="150rpx"><view v-for="(item,index) in baseFormData.inspectionCustodyWorkLogDetailBoList" :key='index'><uni-forms-item label="照片" required :ref="'inspectionCustodyWorkLogDetailBoList-'+index":rules="[{required: true,errorMessage: `检查${index+1}图片不能为空`}]" :name="['inspectionCustodyWorkLogDetailBoList',index,'imagelist']" label-width="100rpx"><view class="form-item"><photoListv-model="baseFormData.inspectionCustodyWorkLogDetailBoList[index].imagelist"limit="9"></photoList></view></uni-forms-item></view></view><view ><u-button type="primary" icon="plus-square-fill" @click="add" plain:hairline="false">新增检查项</u-button></view></uni-forms><u-button class="button" type="primary" shape="circle" @click="submit('baseForm')">提交</u-button>
</template>
<script>
export default {data() {return {baseFormData: {inspectionCustodyWorkLogDetailBoList: [], //检查记录},dynamicRules: {// 基础表单数据imageList: {rules: [{required: true,errorMessage: '最少一张图片'}, {validateFunction: (rule, value, data, callback) => {// 异步需要返回 Promise 对象return new Promise((resolve, reject) => {setTimeout(() => {//按照自己的需要填写}, 500)})}}]},}}，onReady() {/* 这里，我们通过refs拿到增加的内容，然后setRules */this.$refs.baseForm.setRules(this.dynamicRules)},methods:{// 选择企业这是在父表单需获取子项时增加company(val) {if (val != undefined) {// 获取企业必检项这是举例this.mustDeal = [{checkContent：1,inspectionItemType:1,riskLocation:2},{checkContent：1,inspectionItemType:1,riskLocation:2}]//循环获取内容添加至表单中this.mustDeal.forEach((item, index) => {this.baseFormData.inspectionCustodyWorkLogDetailBoList.push({checkContent: item.checkContent,images: null,inspectionItemType: item.inspectionItemType,riskLocation: item.riskLocation,id: Date.now(),imagelist: [],isPass: null, //是否合格isMustCheck: 1,})})/* 这里，我们通过refs拿到增加的内容，然后setRules */this.$nextTick(() => {/* 用nextTick是让界面先渲染 *//* 根据html中的ref规则，获取到uni-forms-item */this.baseFormData.inspectionCustodyWorkLogDetailBoList.forEach((ite, inde) => {// 	// rules[`imagelist`]=this.dynamicRules.imagelist.ruleslet $Item = this.$refs['inspectionCustodyWorkLogDetailBoList-' + inde];/* 对这个uni-forms-item主动setRules *//* 这里直接设置的是对应字段的rules */$Item[0].setRules(this.dynamicRules.imagelist.rules);})})} },// 新增检查项add() {this.baseFormData.inspectionCustodyWorkLogDetailBoList.push({checkContent: null,images: null,id: Date.now(),imagelist: [],isPass: null, //是否合格isMustCheck: 0, //非必检})/* 这里，我们通过refs拿到增加的内容，然后setRules */this.$nextTick(() => {/* 用nextTick是让界面先渲染 *//* 根据html中的ref规则，获取到uni-forms-item */let $Item = this.$refs['inspectionCustodyWorkLogDetailBoList-' + (this.baseFormData.inspectionCustodyWorkLogDetailBoList.length - 1)];/* 对这个uni-forms-item主动setRules *//* 这里直接设置的是对应字段的rules */$Item[0].setRules(this.dynamicRules.imagelist.rules);});},// 提交submit(ref) {this.$refs[ref].validate().then(res => {}).catch(err => {//输出报错信息this.$modal.alert(err[0].errorMessage)})},}
}
</script>

以上是本人工作中为解决问题使用，不足之处还望指出。