### 如何在 `el-form` 中使用 `validator` 进行表单校验 #### 定义表单及其规则 为了实现更复杂的校验逻辑，可以为特定字段设置自定义的验证函数。这些函数会在调用 `validate` 或者 `validateField` 方法时被触发。 ```html <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-button type="primary" @click="submitForm('ruleForm')">提交</el-button> </el-form> </template> <script> export default { data() { var checkName = (rule, value, callback) => { if (!value) { return callback(new Error('请输入活动名称')); } setTimeout(() => { if (value.length < 3 || value.length > 10) { callback(new Error('长度应在 3 到 10 个字符之间')); } else { callback(); } }, 1000); }; return { ruleForm: { name: '' }, rules: { name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { validator: checkName, trigger: 'change' } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); } } }; </script> ``` 在这个例子中，通过给定的 `checkName` 函数实现了对输入框内文本长度的具体限制，并将其作为 `validator` 参数传递给了对应的 `el-form-item` 组件中的 `rules` 属性[^1]。 当用户尝试提交表单时，会先执行内置的基础校验（如必填项），之后再运行自定义的 `validator` 函数来进一步确认数据的有效性。如果所有条件都满足，则允许继续处理；反之则提示错误信息并阻止提交操作[^2]。