### 如何在 `el-form` 表单中对数组类型的输入框进行单个字段的验证并实现错误高亮 为了实现在 `el-form` 中针对数组类型的输入框进行单个字段的验证，并且当某个输入框的内容不符合规则时能够单独高亮显示（即“爆红”），可以按照以下方式构建表单结构和逻辑。 #### 实现方案 1. **绑定动态数据模型** 将 `el-form` 的 `:model` 属性绑定到一个包含数组的对象上。例如，假设我们需要校验多个用户的姓名和描述，则可以通过如下形式定义数据模型： ```javascript const formData = reactive({ users: [ { name: '', description: '' }, { name: '', description: '' } ] }); ``` 2. **设置嵌套规则** 对于数组中的每一项，都需要为其指定独立的校验规则。通过 `rules` 定义这些规则，并将其应用到对应的 `prop` 上。以下是具体的规则示例： ```javascript const rules = { 'users.*.name': [{ required: true, message: '请输入用户名', trigger: 'blur' }], 'users.*.description': [{ min: 5, max: 30, message: '描述长度应在5至30之间', trigger: 'blur' }] }; ``` 此处 `'users.*.name'` 和 `'users.*.description'` 是用于匹配数组中任意索引位置上的属性名[^3]。 3. **渲染动态表单项** 利用 `v-for` 指令遍历数组，生成对应数量的输入框组件。同时为每个输入框赋予唯一的 `prop` 值以便关联其校验规则。 ```vue <template> <el-form :model="formData" :rules="rules" ref="formRef"> <div v-for="(user, index) in formData.users" :key="index"> <!-- 用户名 --> <el-form-item :label="'用户' + (index + 1)" :prop="'users.' + index + '.name'" :rules="rules['users.*.name']"> <el-input v-model="formData.users[index].name"></el-input> </el-form-item> <!-- 描述 --> <el-form-item :label="'描述' + (index + 1)" :prop="'users.' + index + '.description'" :rules="rules['users.*.description']"> <el-input v-model="formData.users[index].description"></el-input> </el-form-item> </div> <el-button type="primary" @click="submitForm">提交</el-button> </el-form> </template> ``` 4. **触发单个字段校验** 调用 `$refs.formRef.validateField()` 方法可手动触发表单中特定字段的校验操作。如果某字段未通过校验，则会自动标记为红色边框状态。 ```javascript function submitForm() { const formRef = unref(formRef); if (!formRef) return; // 手动校验第一个用户的名称字段作为演示 formRef.validateField('users.0.name', errorMessage => { console.log(errorMessage ? '校验失败:' + errorMessage : '校验成功'); }); // 或者整体校验整个表单 formRef.validate(valid => { if (valid) alert('全部校验通过！'); else alert('存在错误，请修正后再尝试提交！'); }); } ``` 以上代码片段展示了如何配置以及处理基于数组型数据源的复杂场景下的单一字段级联校验机制[^4]。 --- ### 示例总结 最终的效果是每当用户填写的信息违反预设条件时，相应的输入区域会被标注成醒目的颜色提醒使用者修改直至满足所有约束为止。 ```html <template> <el-form :model="formData" :rules="rules" ref="formRef"> <div v-for="(item,index) of formData.list" :key="index"> <el-form-item :label="'第'+(index+1)+'行 名字'" :prop="'list.'+index+'.name'" :rules="rules['*.name']"> <el-input v-model="formData.list[index].name"/> </el-form-item> <el-form-item :label="'第'+(index+1)+'行 备注'" :prop="'list.'+index+'.desc'" :rules="rules['*.desc']"> <el-input v-model="formData.list[index].desc"/> </el-form-item> </div> <el-button @click="onSubmit()">保存</el-button> </el-form> </template> <script setup lang="ts"> import {reactive, ref} from "vue"; const formData=reactive({list:[{name:'',desc:''},{name:'',desc:''}]}); const rules={ "*.name":[{required:true,message:"名字不能为空",trigger:"change"}], "*.desc":[{min:3,max:8,message:"备注需介于3~8位",trigger:"blur"}] }; function onSubmit(){ const formEl=formRef.value; if(!formEl)return ; formEl.validate((isValid:boolean)=>{ if(isValid){ alert("提交成功！"); }else{ alert("请完善信息"); } }) } const formRef=ref(); </script> ```