### Vue2 中使用 el-form 实现表单必填项校验，特别是 el-select 组件 在 Vue2 中结合 Element UI 的 `el-form` 和 `el-select` 组件实现表单必填项校验，并确保未填写时无法跳转页面，可以通过以下方式完成。 #### 1. 基本结构 使用 `el-form` 的 `model` 属性绑定表单数据，通过 `rules` 定义校验规则。对于 `el-select` 组件，需要确保其 `v-model` 绑定的值是 `el-form` 的 `model` 属性中的一个直接属性[^1]。 ```vue <template> <el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <el-form-item label="名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="选择类型" prop="type"> <el-select v-model="ruleForm.type" placeholder="请选择类型"> <el-option label="类型一" value="type1"></el-option> <el-option label="类型二" value="type2"></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { ruleForm: { name: "", type: "", }, rules: { name: [ { required: true, message: "名称必填", trigger: "blur" }, ], type: [ { required: true, message: "请选择类型", trigger: "change" }, ], }, }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { // 校验通过，允许页面跳转 this.navigateToNextPage(); } else { // 校验失败，阻止页面跳转 console.log("校验失败"); return false; } }); }, navigateToNextPage() { // 页面跳转逻辑 this.$router.push("/next-page"); }, }, }; </script> ``` #### 2. 校验规则触发时机 对于 `el-select` 组件，校验规则的触发时机应设置为 `change`，即当用户选择或更改选项时触发校验。这可以确保用户未选择任何选项时，系统能够及时提示错误信息[^1]。 #### 3. 自动滚动到第一个错误字段 如果表单中存在多个字段且校验失败，可以通过工具函数自动滚动到第一个错误字段的位置，提升用户体验[^2]。 ```javascript const autoScrollToFormValidateErrorPosition = (that) => { let timer = null; timer = setTimeout(() => { const error_div = document.body.querySelector(".el-form-item__error"); that.$nextTick(() => { if (error_div) { const el = document.body.querySelector(".el-form-item__error"); el.scrollIntoView({ behavior: "smooth", block: "center" }); } }); clearTimeout(timer); timer = null; }, 50); }; // 调用方法 if (!valid) { autoScrollToFormValidateErrorPosition(this); } ``` #### 4. 动态表单切换显示/隐藏 如果表单中包含动态显示/隐藏的字段（如通过 `v-if` 控制），需要注意切换时可能导致校验报错闪现的问题。建议将 `v-if` 替换为 `v-show`，或者在切换时手动清除校验状态[^3]。 ```javascript this.$refs.ruleForm.clearValidate(); ``` #### 5. 异步校验规则 如果需要对 `el-select` 的值进行异步校验（如验证选项是否有效），可以在 `rules` 中定义自定义校验规则并结合异步操作完成[^4]。 ```javascript { validator: (rule, value, callback) => { if (!value) { return callback(new Error("请选择类型")); } // 模拟异步校验 setTimeout(() => { if (value !== "type1" && value !== "type2") { callback(new Error("无效的类型")); } else { callback(); } }, 1000); }, trigger: "change", }, ``` --- ###