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">
									<photoList
										v-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.rules
							let $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>

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