### 如何在 Element UI 中对包含 `select` 和 `input` 的双重输入项进行表单验证 为了实现复杂的表单结构，Element UI 提供了灵活的方式来处理嵌套或组合的输入组件。当在一个 `el-form-item` 下有多个子控件时，可以通过为每个子控件指定唯一的 `prop` 属性来分别配置它们各自的校验规则。 对于包含 `select` 和 `input` 组件的情况，可以按照如下方式构建： #### HTML 结构 ```html <el-form ref="ruleFormRef" :model="formInline" label-width="80px"> <el-form-item prop="regionAndInput" :rules="[ { required: true, message: '请选择活动区域', trigger: 'change' }, { validator: validateRegionAndInput, trigger: ['blur','change'] } ]"> <span style="margin-right:10px">地区：</span> <el-select v-model="formInline.region" placeholder="请选择活动区域" @change="handleSelectChange"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> <br /><br /> <span>描述：</span> <el-input v-model="formInline.inputDesc" autocomplete="off"></el-input> </el-form-item> </el-form> ``` 这里的关键在于给整个复合字段指定了一个共同的 `prop` 名字 `"regionAndInput"` 并为其设置了联合校验逻辑[^1]。 #### JavaScript 方法 ```javascript export default { data() { return { formInline: { region: '', inputDesc: '' }, rules: {} }; }, methods: { handleSelectChange(value) { console.log(`selected ${value}`); }, validateRegionAndInput(rule, value, callback) { const { region, inputDesc } = this.formInline; if (!region || !inputDesc.trim()) { callback(new Error('请填写完整的选项')); } else { callback(); } } } }; ``` 此自定义验证函数会检查两个条件：一个是下拉菜单的选择情况；另一个是文本框的内容是否为空白字符之外还有其他有效输入。只有两者都满足才能通过验证[^2]。