方式一：
import { formContextKey, formItemContextKey } from "element-plus";
// 获取 el-form 组件上下文
const formContext = inject(formContextKey, void 0);
// 获取 el-form-item 组件上下文
const formItemContext = inject(formItemContextKey, void 0);
formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);方式二：
// 子组件核心流程
import { useFormItem } from "element-plus";
const { formItem } = useFormItem();
const emit = defineEmits(["update:value"]);
const content = computed({
get() {
return props.value;
},
set(v: string) {
// 同步父组件值
emit("update:value", v);
// 触发父组件定义的rules
formItem?.validate?.("blur").catch(err => {
console.log(err);
});
}
});
// 父组件 rules
<el-form-item label="回复内容" prop="content" :rules="requiredRules">
<!-- 父组件调用 -->
<tinyMce v-model:value="form.content"></tinyMce>
</el-form-item>
const requiredRules = [{ required: true, message: "请填写", trigger: "blur" }];element ui 自定义组件校验方式，详见以下链接地址
使用element Form 自带校验功能，实现上传控件的校验_element form 校验mixin-CSDN博客文章来源：https://www.toymoban.com/news/detail-788975.html
ant design vue 1.x 自定义组件校验方式，详见以下链接ant design vue1.x 自定义校验_1.x ant-design-vue date-range-picker 校验-CSDN博客文章来源地址https://www.toymoban.com/news/detail-788975.html
到了这里，关于element plus自定义组件表单校验的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
