概要
最近项目上有个功能,需要给动态的form表单添加异步校验,经多方资料查找与汇总,现把解决方案记录分享一下
技术栈
本项目使用的技术栈是 uniapp,前端UI框架使用的是 uView
调整uView框架的Form
找到文件:uni_modules\uview-ui\components\u-form\u-form.vue 然后修改源码,
// 原始代码
// 对部分表单字段进行校验
async validateField(value, callback, event = null) {
// $nextTick是必须的,否则model的变更,可能会延后于此方法的执行
this.$nextTick(() => {
// 校验错误信息,返回给回调方法,用于存放所有form-item的错误信息
const errorsRes = [];
// 如果为字符串,转为数组
value = [].concat(value);
// 历遍children所有子form-item
this.children.map((child) => {
// 用于存放form-item的错误信息
const childErrors = [];
if (value.includes(child.prop)) {
// 获取对应的属性,通过类似'a.b.c'的形式
const propertyVal = uni.$u.getProperty(
this.model,
child.prop
);
// 属性链数组
const propertyChain = child.prop.split(".");
const propertyName =
propertyChain[propertyChain.length - 1];
const rule = this.formRules[child.prop];
// 如果不存在对应的规则,直接返回,否则校验器会报错
if (!rule) return;
// rule规则可为数组形式,也可为对象形式,此处拼接成为数组
const rules = [].concat(rule);
// 对rules数组进行校验
for (let i = 0; i < rules.length; i++) {
const ruleItem = rules[i];
// 将u-form-item的触发器转为数组形式
const trigger = [].concat(ruleItem?.trigger);
// 如果是有传入触发事件,但是此form-item却没有配置此触发器的话,不执行校验操作
if (event && !trigger.includes(event)) continue;
// 实例化校验对象,传入构造规则
const validator = new Schema({
[propertyName]: ruleItem,
});
validator.validate({
[propertyName]: propertyVal,
},
(errors, fields) => {
if (uni.$u.test.array(errors)) {
errorsRes.push(...errors);
childErrors.push(...errors);
}
child.message =
childErrors[0]?.message ?? null;
}
);
}
}
});
// 执行回调函数
typeof callback === "function" && callback(errorsRes);
});
},
// 新代码
// 对部分表单字段进行校验
async validateField(value, callback, event = null) {
// $nextTick是必须的,否则model的变更,可能会延后于此方法的执行
this.$nextTick(() => {
// 校验错误信息,返回给回调方法,用于存放所有form-item的错误信息
const errorsRes = [];
// 如果为字符串,转为数组
value = [].concat(value);
// 历遍children所有子form-item
this.children.map((child) => {
// 用于存放form-item的错误信息
const childErrors = [];
if (value.includes(child.prop)) {
// 获取对应的属性,通过类似'a.b.c'的形式
const propertyVal = uni.$u.getProperty(
this.model,
child.prop
);
// 属性链数组
const propertyChain = child.prop.split(".");
const propertyName =
propertyChain[propertyChain.length - 1];
// 此处为新增代码
let rule = this.formRules[child.prop];
// 因为改为数组后,链式无法找到rule,使用uniapp的getProperty可以找到
if(!rule) {
rule=uni.$u.getProperty(
this.formRules,
child.prop);
}
// 如果不存在对应的规则,直接返回,否则校验器会报错
if (!rule) return;
// rule规则可为数组形式,也可为对象形式,此处拼接成为数组
const rules = [].concat(rule);
// 对rules数组进行校验
for (let i = 0; i < rules.length; i++) {
const ruleItem = rules[i];
// 将u-form-item的触发器转为数组形式
const trigger = [].concat(ruleItem?.trigger);
// 如果是有传入触发事件,但是此form-item却没有配置此触发器的话,不执行校验操作
if (event && !trigger.includes(event)) continue;
// 实例化校验对象,传入构造规则
const validator = new Schema({
[propertyName]: ruleItem,
});
validator.validate({
[propertyName]: propertyVal,
},
(errors, fields) => {
if (uni.$u.test.array(errors)) {
errorsRes.push(...errors);
childErrors.push(...errors);
}
child.message =
childErrors[0]?.message ?? null;
}
);
}
}
});
// 执行回调函数
typeof callback === "function" && callback(errorsRes);
});
},
页面代码
<u--form
labelPosition="top"
:model="evaluate"
:rules="rules"
ref="uForm"
labelWidth="auto"
:labelStyle="{ color: '#333', 'font-size': '32rpx' }"
>
<view v-for="(item, index) in evaluate.list" :key="index">
<u-form-item :label="item.title" :prop="`list.${index}.value`">
<template>
<u--textarea
v-model.trim="item.value"
placeholder="请输入"
></u--textarea>
</template>
</u-form-item>
</view>
</u--form>
mounted() {
this.setRules()
},
methods: {
// 循环设置rules
setRules() {
this.evaluate.list.forEach((ele, index) => {
this.$set(this.rules, `list.${index}.value`, [
{
required: true,
message: '此项为必填项',
trigger: ['blur', 'change']
}
])
})
this.$nextTick(() => {
this.$refs.uForm.setRules(this.rules)
})
},
}
注意事项
需要注意的点
- 页面prop的写法 (:prop=“
list.${index}.value
”) - 需要手动setRules