【tips】动态el-form-item中校验的注意点

Dorcas_FE2025-11-29 19:00

场景：

在el-table中动态渲染了input输入框。输入框是必填项，
必填校验不通过需要展示红色边框（不需要提示文字）

html 复制代码

<el-table-column v-for="(header, index) in tableHeader" :key="index" :label="header.name"  align="center" :prop="header.code">
<template #default="scope">
 	<el-form-item :prop="`tableRowList.${scope.$index}.${header.code}`" :rules="[{ required: true, message: '', trigger: ['change', 'blur'], validator: validateValue } ]" :show-error="false" class="mb0" label-width="0">
	 <el-input v-model="scope.row[header.code]" placeholder="请输入" size="small"></el-input>
  </el-form-item>
	</template>
</el-table-column>

一般我们校验的做法是,在form的model值中对于属性，在rules进行设置xx

xml 复制代码

 <el-form :model="queryParams_generate" :rules="rules" ref="queryForm" :inline="true" label-width="90px">
<el-form-item :prop="xx" >

而对于动态表格，rules的prop是不一定的，我们valid可以单独设置。

这里的注意点在于：**validateValue 的第二个参数value，如果且xx在model的话，获取value是可以的，但我们目前的:prop="tableRowList.${scope.$index}.${header.code}"，不存在model值中，

value值为空，所以要另外获取要检查的输入值val**

javascript 复制代码

// 验证函数：检查数值是否超出限制
const validateValue = (rule, value, callback) => {
    const idx = rule.field?.split('.')?.[1];
    const code = rule.field?.split('.')?.[2];
    const val = tableRowList.value?.[idx]?.[code];

    if (!val) return callback(); // 非必填
    console.log('validateValue', val)
    // if (isNaN(Number(val))) {
    //     return callback(new Error(`非数字`));
    // }
    const numValue = getNum(val);
    const checkResult = checkNumVaildText(numValue);
    if (checkResult) {
        callback(new Error(`数据${checkResult}`));
    } else {
        callback();
    }
};

from.validate调用的返回值valid为true，所以在valid之后要注意再处理动态prop的校验

javascript 复制代码

formRef.value.validate((valid) => {
    if (valid) {
        // 这里另外处理动态prop的校验
        }
 })