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>
