vue中富文本编辑框 vue-quill-editor 如何触发表单校验？validateField是做什么的？

validateField是做什么的？为什么会需要自触发的事件呢？如果用原生html封装组件 (vue-quill-editor富文本组件)会无法触发element ui的表单校验，需要点击提交按钮才能校验。rules里的trigger: 'blur’已经不起效了。接下来我用代码的形式给大家呈现一下(富文本组件)富文本组件自触发校验三部曲1.获取表单元素(ref)2.添加事件(触发校验)3.添加校

Youyzq

3430人浏览 · 2021-09-05 22:18:44

Youyzq · 2021-09-05 22:18:44 发布

validateField是做什么的？

为什么会需要自触发的事件呢？

如果用原生html封装组件 (vue-quill-editor富文本组件)会无法触发element ui的表单校验，需要点击提交按钮才能校验。rules里的trigger: 'blur’已经不起效了。

接下来我用代码的形式给大家呈现一下(富文本组件)

富文本组件

自触发校验三部曲

1.获取表单元素(ref)

2.添加事件(触发校验)

3.添加校验规则实现调用

在从事件函数中启动校验

效果完成

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^