### el-form 表单校验的使用步骤 在 Element-UI 中，`el-form` 的表单校验功能非常强大且灵活。以下是关于如何实现表单校验的详细说明[^1]。 #### 1. 引入组件 首先需要在项目中引入 `el-form` 和 `el-form-item` 组件。这些组件是实现表单和校验的基础。 ```javascript import { ElForm, ElFormItem } from 'element-plus'; ``` #### 2. 定义表单数据 通过 Vue 的 `data` 方法定义表单的数据模型。例如： ```javascript data() { return { numberValidateForm: { age: '' } }; } ``` #### 3. 配置校验规则 在 `rules` 属性中定义每个字段的校验规则。以下是一个简单的示例[^2]： ```javascript rules: { age: [ { required: true, message: '年龄不能为空', trigger: 'blur' }, { type: 'number', message: '年龄必须为数字值', trigger: 'blur' } ] } ``` #### 4. 使用 el-form 和 el-form-item 将 `el-form` 和 `el-form-item` 结合使用，并绑定 `model` 和 `rules` 属性。 ```html <el-form :model="numberValidateForm" :rules="rules" ref="numberValidateForm"> <el-form-item label="年龄" prop="age"> <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input> </el-form-item> </el-form> ``` #### 5. 触发校验 通过调用 `validate` 或 `validateField` 方法触发校验。例如，在提交按钮的点击事件中调用 `validate` 方法： ```javascript methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('提交成功!'); } else { console.log('表单验证失败'); return false; } }); } } ``` 对应模板代码如下： ```html <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button> ``` #### 6. 动态校验（可选） 如果需要动态添加或移除校验规则，可以通过修改 `rules` 对象实现。 ```javascript this.rules.age.push({ min: 18, max: 60, message: '年龄应在18到60岁之间', trigger: 'blur' }); ``` ### 示例完整代码 以下是一个完整的表单校验示例： ```html <template> <el-form :model="numberValidateForm" :rules="rules" ref="numberValidateForm"> <el-form-item label="年龄" prop="age"> <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input> </el-form-item> <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button> </el-form> </template> <script> export default { data() { return { numberValidateForm: { age: '' }, rules: { age: [ { required: true, message: '年龄不能为空', trigger: 'blur' }, { type: 'number', message: '年龄必须为数字值', trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('提交成功!'); } else { console.log('表单验证失败'); return false; } }); } } }; </script> ```