### Element UI 表单校验规则不生效的原因分析 在使用 Element UI 的 `el-form` 和 `el-form-item` 时，表单校验规则（rules）不生效可能由以下原因引起： 1. **未正确绑定 `prop` 属性** 在 `el-form-item` 中，`prop` 属性是绑定表单字段的关键。如果未设置或设置错误的 `prop` 属性，校验规则将无法关联到对应的表单字段，导致校验失效[^2]。 ```html <!-- 错误示例 --> <el-form-item :label="label" :rules="rules"> <el-input v-model="form.id" placeholder="请输入内容"></el-input> </el-form-item> <!-- 正确示例 --> <el-form-item :label="label" :rules="rules" prop="id"> <el-input v-model="form.id" placeholder="请输入内容"></el-input> </el-form-item> ``` 2. **动态表单中未正确处理 `prop` 值** 当表单为动态生成时，`prop` 值需要动态绑定。如果动态绑定的 `prop` 值未正确设置或与数据模型不匹配，校验规则同样会失效[^3]。 ```html <!-- 动态表单示例 --> <el-form :model="dynamicForm" ref="dynamicForm"> <el-form-item v-for="(item, index) in dynamicForm.items" :key="index" :prop="'items.' + index + '.value'" :rules="rules"> <el-input v-model="item.value"></el-input> </el-form-item> </el-form> ``` 3. **`el-form` 的 `model` 未正确绑定** `el-form` 的 `model` 属性必须绑定一个对象，且该对象的键需与 `el-form-item` 的 `prop` 属性一致。如果 `model` 绑定错误或缺失，校验规则将无法生效[^1]。 ```html <!-- 错误示例 --> <el-form :model="undefinedForm"> <el-form-item prop="id" :rules="rules"> <el-input v-model="form.id"></el-input> </el-form-item> </el-form> <!-- 正确示例 --> <el-form :model="form"> <el-form-item prop="id" :rules="rules"> <el-input v-model="form.id"></el-input> </el-form-item> </el-form> ``` 4. **动态删除表单项后未重置校验状态** 在动态添加或删除表单项时，若未正确处理校验状态，可能会导致校验规则失效或报错。例如，动态删除表单项后，Element UI 可能会抛出类似 `"please transfer a valid prop path to form item!"` 的错误。可以通过设置 `destroy-on-close` 属性来解决此问题。 ```html <el-dialog :visible.sync="dialogVisible" :destroy-on-close="true"> <el-form :model="form"> <el-form-item v-for="(item, index) in form.items" :key="index" :prop="'items.' + index + '.value'" :rules="rules"> <el-input v-model="item.value"></el-input> </el-form-item> </el-form> </el-dialog> ``` 5. **异步验证警告问题** 如果隐藏了浏览器控制台输出中的 `async-validator` 验证警告，可能是因为校验规则中存在异步逻辑，但未正确处理返回值。确保所有校验规则都返回正确的 Promise 或回调函数[^1]。 ```javascript const rules = { id: [ { required: true, message: '请输入ID', trigger: 'blur' }, { type: 'string', min: 3, max: 10, message: '长度应在3到10个字符之间', trigger: 'blur' } ] }; ``` ### 示例代码 以下是一个完整的表单校验示例： ```html <template> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="ID" prop="id"> <el-input v-model="form.id" placeholder="请输入ID"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { id: '' }, rules: { id: [ { required: true, message: '请输入ID', trigger: 'blur' }, { min: 3, max: 10, message: '长度应在3到10个字符之间', trigger: 'blur' } ] } }; }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { console.log('提交成功'); } else { console.log('校验失败'); } }); } } }; </script> ```