element plus自定义组件表单校验

Hsensor2024-01-14 23:54

方式一：

javascript 复制代码

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]);

方式二：

javascript 复制代码

// 子组件核心流程
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博客

ant design vue 1.x 自定义组件校验方式，详见以下链接ant design vue1.x 自定义校验_1.x ant-design-vue date-range-picker 校验-CSDN博客