el-form自定义表单验证

### 实现 Element UI `el-form` 组件的自定义表单验证 在 Element UI 中，通过配置 `rules` 属性可以为 `el-form-item` 添加校验规则。对于更复杂的场景，则可以通过编写 JavaScript 函数来自定义这些规则。 #### 定义自定义校验函数 为了创建一个自定义校验器，在 `rules` 配置项里指定对应的字段名，并设置其 `validator` 参数指向一个回调函数。此函数接收三个参数：`rule`, `value`, 和 `callback`。当调用 `callback(error)` 并传入错误信息字符串时即表示校验失败；反之如果不带任何参数调用则代表成功[^1]。 ```javascript // 自定义校验逻辑 const validatePass = (rule, value, callback) => { if (value === '') { return callback(new Error('请输入密码')); } else { if (this.ruleForm.checkPass !== '') { this.$refs.ruleForm.validateField('checkPass'); } callback(); } }; ``` #### 将自定义校验应用到表单项 接着把上述定义好的校验器关联至具体的输入框上： ```html <template> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm"> <!-- ... --> <el-form-item label="密码" prop="pass"> <el-input type="password" v-model="ruleForm.pass"></el-input> </el-form-item> <!-- 其他表单项... --> </el-form> </template> <script> export default { data() { return { ruleForm: { pass: '' }, rules: { pass: [ { validator: validatePass, trigger: 'blur' } ] } }; } } </script> ``` 这样就完成了一个简单的基于事件触发(`trigger`)的自定义校验流程。 #### 单独校验某个表单项 如果希望单独对某一项进行即时反馈式的校验而不必等待整个表单提交，那么可以利用 `validateField()` 方法来实现这一点。该方法接受要被校验项目的属性名称作为唯一参数并返回 Promise 对象以便进一步处理结果[^2]。 ```javascript methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetFields() { this.$refs['ruleForm'].resetFields(); }, checkOneField() { this.$refs['ruleForm'].validateField(['pass'], (errorMessage) => { if (errorMessage) { console.error(errorMessage); } else { console.info('Password field is valid.'); } }); } } ``` 以上代码片段展示了如何在一个 Vue.js 应用程序中集成 Element UI 表单及其自定义校验功能[^3]。