el-form自定义表单校验

### 如何在 Element Plus 中实现 `el-form` 的自定义表单校验 #### 自定义校验规则的实现方法 在 Element Plus 中，可以通过设置 `rules` 属性来定义表单项的校验规则。对于更复杂的场景，可以使用函数形式来自定义校验逻辑[^1]。 以下是通过 `validator` 函数创建自定义校验规则的一个完整示例： ```vue <template> <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef"> <el-form-item label="用户名" prop="username"> <el-input v-model="ruleForm.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="ruleForm.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> import { ElMessage } from 'element-plus'; export default { data() { const validateUsername = (rule, value, callback) => { if (!value || value.length === 0) { callback(new Error('请输入用户名')); } else if (value.length < 4) { callback(new Error('用户名长度至少为4个字符')); } else { callback(); } }; const validatePassword = (rule, value, callback) => { if (!value || value.length === 0) { callback(new Error('请输入密码')); } else if (value.length < 6) { callback(new Error('密码长度至少为6个字符')); } else { callback(); } }; return { ruleForm: { username: '', password: '' }, rules: { username: [{ validator: validateUsername, trigger: 'blur' }], password: [{ validator: validatePassword, trigger: 'blur' }] } }; }, methods: { submitForm() { this.$refs.ruleFormRef.validate((valid) => { if (valid) { ElMessage.success('表单验证成功'); } else { ElMessage.error('表单验证失败，请检查输入内容'); } }); } } }; </script> ``` #### 关键点解析 1. **自定义校验器** 使用 `validator` 参数定义一个回调函数，该函数接收三个参数：`rule`, `value`, 和 `callback`。当校验不通过时，调用 `callback(new Error('错误消息'))`; 当校验通过时，调用 `callback()`[^2]。 2. **触发时机** 设置 `trigger` 属性指定何时触发校验，常见的值有 `'change'` 或 `'blur'`。 3. **动态校验特定字段** 如果需要单独校验某个字段，可使用 `$refs.formName.validateField(field)` 方法。 #### 动态校验单一字段的代码示例 以下是一个针对列表中的某一项进行独立校验的例子： ```javascript validateSingleItem(index) { this.$refs.ruleFormRef.validateField(`list.${index}.name`, (errorMessage) => { if (errorMessage) { console.log(`第 ${index} 项未通过校验`); } else { console.log(`第 ${index} 项已通过校验`); } }); } ``` 此代码片段展示了如何利用 Vue 的响应式特性以及 Form 组件的方法对嵌套数据结构执行精确校验。 ---