ElementUI 表单校验：解决 prop 属性与校验规则不匹配问题

在使用 ElementUI 表单组件时，我们常常需要对表单项进行校验。然而，有时我们会遇到表单项的校验规则不生效的情况，这很可能是因为表单项的 prop 属性值与校验规则中的属性名不匹配导致的。

问题描述

例如，以下代码定义了一个 ElementUI 表单，其中包含两个表单项 publicImgAndName 和 publicGoodsRules，并为它们定义了校验规则 timeLimitPromotionModeRules：html<el-form :model='publicModeForm' v-else-if='moduleType === 'TimeLimitPromotionMode' || moduleType === 'SaveMoneyMode' || moduleType === 'HeartbeatMode' || moduleType === 'DoubleRowMode'' :rules='timeLimitPromotionModeRules' :ref='moduleType'> {/* ...省略部分代码 /} {/ ...省略部分代码 */} javascripttimeLimitPromotionModeRules: { publicImgAndName: [{ validator: checkPublicImageAndName, trigger: 'change', required: true }], publicGoodsRules: [{ validator: checkPublicGoodsList, trigger: 'change', required: true }]},

然而，在实际运行中，publicGoodsRules 表单项的校验规则并没有生效。

原因分析

问题的原因在于 publicGoodsRules 表单项的 prop 属性值为 'publicGoodsRules'，而校验规则 timeLimitPromotionModeRules 中对应的属性名也是 'publicGoodsRules'，两者完全一致。根据 ElementUI 的文档，prop 属性的值应该指向表单数据对象中对应的属性名，而校验规则的属性名也应该与之保持一致。

解决方案

要解决这个问题，我们需要将 publicGoodsRules 表单项的 prop 属性值改为与校验规则中对应的属性名保持一致。例如，可以将 prop 属性值改为 'publicGoodsList'，同时将校验规则中的属性名也改为 'publicGoodsList'：html {/* ...省略部分代码 */}javascripttimeLimitPromotionModeRules: { publicImgAndName: [{ validator: checkPublicImageAndName, trigger: 'change', required: true }], publicGoodsList: [{ validator: checkPublicGoodsList, trigger: 'change', required: true }]},

注意事项

确保自定义校验函数（如 checkPublicGoodsList）已经定义并且正确地执行校验逻辑。* 仔细检查所有表单项的 prop 属性值和校验规则中的属性名是否一致。

通过以上步骤，我们就能够解决 ElementUI 表单校验中 prop 属性与校验规则不匹配的问题，确保表单校验功能正常运作。