# el-form表单验证报错问题解决技术笔记：选择xx后仍 校验 提示“请选择xx”

蚘雨溪
395 阅读3分钟

一、问题描述

在 Vue 项目使用 Element Plus 组件构建的表单中，已经选择了插件，但在提交表单时，表单验证依旧报错提示 “请选择插件”。

二、报错信息与调试日志分析

报错信息

plaintext
Apply
RuleScriptEditor.vue:378 获取插件固定值失败: SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at Proxy.handlePluginChange (RuleScriptEditor.vue:351:31)
    at onChange (RuleScriptEditor.vue:98:84)
    at callWithErrorHandling (runtime-core.esm-bundler.js:199:19)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:206:17)
    at emit (runtime-core.esm-bundler.js:6439:5)
    at runtime-core.esm-bundler.js:8152:45
    at emitChange (useSelect.ts:355:7)
    at Proxy.handleOptionSelect (useSelect.ts:427:7)
    at selectOptionClick (option.vue:91:16)

此报错显示在 handlePluginChange 方法中解析插件固定值的 JSON 字符串时出错，不过这和选择插件后仍提示 “请选择插件” 的问题并无直接关联。

调试日志

plaintext
Apply
RuleScriptEditor.vue:347 选择的插件编号: plug_99mdrb97fp
RuleScriptEditor.vue:261 验证 pluginNo，当前值: undefined
RuleScriptEditor.vue:262 插件选项列表: Proxy(Array) {0: {…}, 1: {…}, 2: {…}}
RuleScriptEditor.vue:261 验证 pluginNo，当前值: undefined
RuleScriptEditor.vue:262 插件选项列表: Proxy(Array) {0: {…}, 1: {…}, 2: {…}}
RuleScriptEditor.vue:98 {pluginNo: Array(1)}

从调试日志能看出，在选择插件后，验证 pluginNo 时其值为 undefined，这表明表单验证获取到的 pluginNo 值存在问题，可能是数据绑定或者更新不及时造成的。

三、问题分析

初始排查时，考虑过异步更新、验证时机和验证状态未清除等问题，但在持续调试过程中发现，prop 属性的配置才是关键问题。prop 是表单验证系统的核心标识符，必须与表单数据对象中的字段名严格一致（包括嵌套路径）。对于动态生成的表单（如循环渲染），prop 需保证唯一性，通常结合索引或唯一标识符。原代码中部分 prop 属性配置未严格遵循该原则，导致验证规则无法正确关联到对应的字段。

四、解决方案

1. 确保 prop 与表单数据对象字段名严格一致

检查并修正所有 el - form-item 的 prop 属性，使其与表单数据对象 ruleForm 中的字段嵌套路径严格一致。例如，对于插件编码表单项：

vue
Apply
<el-form-item 
  label="插件编码" 
  :prop="`ruleScript[${index}].result.pluginNo`"
  :rules="rules.pluginNo"
>
  <el-select 
    v-model="rule.result.pluginNo" 
    filterable 
    @change="(val) => handlePluginChange(val, rule)"
  >
    <!-- 选项内容 -->
  </el-select>
</el-form-item>

2. 保证动态表单 prop 的唯一性

对于动态生成的表单，结合当前规则的索引或唯一标识符来设置 prop。以插件固定值表单项为例：

vue
Apply
<el-form-item label="插件固定值">
  <el-table :data="rule.result.pluginFixedValue" style="width: 100%">
    <!-- 其他列 -->
    <el-table-column label="值">
      <template #default="scope">
        <el-form-item 
          :prop="`ruleScript[${index}].result.pluginFixedValue[${scope.$index}].value`"
          :rules="rules.pluginFixedValue"
        >
          <el-input v-model="scope.row.value" />
        </el-form-item>
      </template>
    </el-table-column>
  </el-table>
</el-form-item>

3. 完善验证规则

在 rules 对象中添加或修正对应字段的验证规则，确保验证规则与 prop 正确关联。

javascript
Apply
const rules = reactive({
  // 其他规则
  pluginNo: [
    { required: true, message: '请选择插件', trigger: 'change' }
  ],
  pluginFieldCodes: [
    { required: true, message: '请选择插件来源字段', trigger: 'change' }
  ],
  pluginFixedValue: [
    { required: true, message: '请输入插件固定值', trigger: 'blur' }
  ]
  // 其他规则
});

4.为什么需要绑定 prop？

  • 表单验证：prop 是验证规则（rules）与表单字段的桥梁。例如，以下规则会通过 prop="email" 关联到 form.email 字段：

    javascript
	rules: {

	  email: [

	    { required: true, message: '邮箱不能为空', trigger: 'blur' },

	    { type: 'email', message: '邮箱格式错误', trigger: 'blur' }

	  ]

	}

  • 错误提示定位：当验证失败时，Element UI 会根据 prop 自动定位到对应的表单项并显示错误信息。

五、总结

在使用 Element Plus 进行表单验证时，prop 属性的正确配置至关重要。它不仅要与表单数据对象中的字段名严格一致，对于动态生成的表单，还需要保证唯一性。通过严格遵循这些原则，能够有效解决表单验证关联错误的问题。同时，在排查问题时要依据报错信息和调试日志，准确判断问题根源，避免被无关代码干扰。

avatar
文章
阅读
粉丝