### 如何在 `el-form-item` 中绑定两个值的校验规则 在 Element UI 的表单验证机制中，`el-form-item` 是通过其 `prop` 属性来关联到 `el-form` 的 `model` 数据对象中的具体字段。如果需要在一个 `el-form-item` 中绑定多个值并对其进行校验，则可以通过自定义校验函数的方式实现。 以下是具体的实现方式： #### 方法一：使用数组形式的数据模型 可以将需要校验的两个值放在同一个数据结构中（如数组），并通过单一的 `prop` 来绑定该数据结构。随后，在校验规则中编写逻辑以分别校验这两个值。 ##### 实现代码示例 ```vue <template> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="姓名和年龄" prop="nameAndAge"> <el-input v-model="form.nameAndAge[0]" placeholder="请输入姓名"></el-input> <el-input v-model="form.nameAndAge[1]" placeholder="请输入年龄"></el-input> </el-form-item> <el-button @click="submitForm">提交</el-button> </el-form> </template> <script> export default { data() { const validateNameAndAge = (rule, value, callback) => { if (!value || !Array.isArray(value)) { return callback(new Error('输入格式错误')); } if (!value[0]) { return callback(new Error('姓名不能为空')); } if (!/^\d+$/.test(value[1])) { return callback(new Error('年龄必须为数字')); } callback(); }; return { form: { nameAndAge: ['', ''] }, rules: { nameAndAge: [{ validator: validateNameAndAge, trigger: 'blur' }] } }; }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { alert('提交成功'); } else { console.log('表单校验失败'); } }); } } }; </script> ``` 此方法的核心在于将两个值组合成一个数组，并通过自定义校验器逐一校验它们[^1]。 --- #### 方法二：分开绑定两个 `el-form-item` 另一种更直观的方法是分别为两个值创建独立的 `el-form-item` 并设置各自的 `prop` 和校验规则。虽然这会增加一些 DOM 结构上的复杂度，但它更加清晰易懂。 ##### 实现代码示例 ```vue <template> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name" placeholder="请输入姓名"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model="form.age" placeholder="请输入年龄"></el-input> </el-form-item> <el-button @click="submitForm">提交</el-button> </el-form> </template> <script> export default { data() { return { form: { name: '', age: '' }, rules: { name: [ { required: true, message: '姓名不能为空', trigger: 'blur' } ], age: [ { required: true, message: '年龄不能为空', trigger: 'blur' }, { pattern: /^\d+$/, message: '年龄必须为数字', trigger: 'blur' } ] } }; }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { alert('提交成功'); } else { console.log('表单校验失败'); } }); } } }; </script> ``` 这种方法的优点是每个字段都有自己的校验规则，易于维护和扩展[^2]。 --- #### 注意事项 1. 如果希望在同一项中显示两个输入框的内容提示，可以在模板中调整布局样式。 2. 自定义校验器需严格遵循回调函数的要求，确保调用 `callback()` 或传递错误消息给它。 3. 需要特别注意的是，`el-form-item` 的 `rules` 属性应放置在其标签上而非子组件（如 `el-input`）上[^2]。 --- ### 总结 无论是采用数组形式还是拆分两项的形式，都可以满足需求。推荐根据实际业务场景选择合适的方式来设计表单及其校验逻辑。