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

最新推荐文章于 2024-05-03 12:18:05 发布
最新推荐文章于 2024-05-03 12:18:05 发布
阅读量3.2k 收藏 7
点赞数 6
分类专栏： vue 文章标签： vue.js html html5 elementui
不许偷代码哦，一键三连以后我的代码就是你的代码！！！
本文链接：https://blog.csdn.net/Youyzq/article/details/120122370
版权

validateField是做什么的？


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


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

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

        富文本组件

自触发校验三部曲

1.获取表单元素(ref)

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

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

 在从事件函数中启动校验 

 

 

效果完成

 

 

Youyzq
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue中富文本编辑框 vue-quill-editor 无法触发验证问题与验证提示无法取消
weixin_58207509的博客
11-01 2887
今天用vue-quill-editor过程中发现 vue-quill-editor 无法触发验证只有当点击确定才能触发 上网搜了一下大致解决流程如下 1 自定义一个 事件 <el-form-item label="题干:" prop="questionss"> //验证字段 <quill-editor ref="text" v-model="form.question" ..
vue富文本编辑器 vue-quill-editor.js quill版本1.3.6
07-01
vue富文本编辑器vue-quill-editor.js quill版本1.3.6 使用教程 ： vue-quill-editor富文本编辑器使用方法，最全，含部分源码解读，含图片上传，如果页面有多个富文本，图片上传解决方案 ...
080910-vuePC端项目(题库列表 elemnet中对部分表单字段进行校验的方法validateField)
Tangoneone的博客
06-01 1307
题库列表 01-题库搜索ui渲染 搜索form表单部分 学科 1、去发请求获取所有的学科数据，存到subjectList：【】数组中 2、获取到数据之后，遍历数组 v-for="item in subjectList"得到每一个将其中的几个值设置给el-selectel-option的label、value、key 企业 1、去发请求获取所有企业的数据，存到 enterpriseList：【】数组中 2、获取到数据之后，遍历数组 v-for="item in enterpriseList"得到每一
Vue3中对富文本编辑器QuillEditor进行非空校验
最新发布
m0_71775808的博客
05-03 268
在element-plus表单內使用QuillEditor富文本编辑器时，element-plus的表单校验对富文本编辑器不生效，需要手动添加校验
elementui+vue中富文本编辑框 vue-quill-editor 触发验证
LJJONESEED的博客
11-11 2049
//首先添加自定义事件 <el-form-item label="内容：" prop="content"> <quill-editor v-model="editModel.content" ref="myQuillEditor" :options="editorOption" @change="onEditorChange($event)" @blur='contentRule' //自定义一个事件 ></quill-editor>
vue-quill-editor焦点处理
weixin_41711593的博客
04-09 1981
目录 前言 一、改进办法 前言 作者在使用vue-quill-editor过程中发现一个坑，就是vue-quill-editor渲染完成后，会自动获取焦点，这很不合理，对于有很多输入框的界面，如果你的富文本较多，进入页面后直接给你滚到页面底部，用户体验不好。 作者用的是3.0.6版本，不知后续有没有改进这个bug 一、改进办法 作者把vue-quill-editor单独写了一个组件，作者在父组件赋值后，把焦点定位到其他input上，解决了直接定位到vue-quill-editor的bug.
vue+element局部表单验证validateField
WangJinPing_的博客
03-27 8922
当想获取验证码的时候，需要验证邮箱格式是否正确，我们就需要用到“validateField“,附上部分代码：当校验不通过时emailError返回值为校验的提示信息，当通过时emailError的值为空，所以if语句中用(emailError）表示校验不通过，反之则通过 ...
vue3.0 vue-quill-editor.rar
09-19
vue3.0+vue-quill-editor+element富文本编辑引入可直接使用 可上传图片调整图片大小
Vue-Quill-Editor富文本编辑器的使用教程
12-29
本文为大家分享了Vue Quill Editor富文本编辑器的具体使用方法，供大家参考，具体内容如下 先看效果图：    1、下载Vue-Quill-Editor  npm install vue-quill-editor --save 2、下载quill（Vue-Quill-Editor...
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
10-15
`vue-quill-editor`是一个非常流行的基于Vue.js的Quill编辑器组件，它提供了丰富的文本格式化功能。然而，在实际使用过程中，可能会遇到各种问题，其中图标样式排布错乱是一个常见的问题。本文将详细介绍如何解决这...
详解vue中使用vue-quill-editor富文本小结（图片上传）
12-11
vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器，在进行富文本编辑的时候，我们往往要插入一些图片，vue-quill-editor默认的处理方式是直接将图片转成base64编码，这样的结果是整个富文本的html...
vue+VeeValidate 校验范围实例详解（部分校验,全部校验）
10-17
validate（)可以指定校验范围内，或者是全局的 字段。而validateAll()只能校验全局。这篇文章主要介绍了vue+VeeValidate 校验范围（部分校验，全部校验） ,需要的朋友可以参考下
vue+element ui 动态校验表单，validateField的方法使用，单独校验某字段
葫芦娃y的博客
03-18 2933
vue+element ui 动态校验表单，validateField的方法使用，单独校验某字段
Vue项目中elementUI表单部分验证validateField以及星号显示等问题
qq_44308109的博客
12-28 9253
一、红色必填星号 红色星号不显示，可能是没有正确填写prop和字段名称，检查一遍 有验证规则但不想加红色星号，可以在el-form标签上加 ：hide-required-asterisk=“true” 当没有添加验证规则，但又要加上红色星号，可以在el-form-item标签上加 ：required=“true” 二、填写后某些表单项仍然有错误提示，用validateField（prop）重新验证 <el-form :model="ruleForm" :rules="rules" re
使用element-plus校验文件上传以及quill-editor必填
zyue_1217的博客
09-13 575
【代码】使用element-plus校验文件上传以及quill-editor必填。
vue-quill-editor验证必填项不能为空
W_Zhulin的博客
03-09 3004
问题： 记录在使用vue-quill-editor验证不能为空和输入空格时的验证问题。 思路： 1、在quill-editor上加change事件，事件触发时传递当前字段，验证当前字段内容； 2、验证正则（关键） vue代码： <template> <div> <Form ref="ruleForm" :model="ruleForm" :rules="ruleValidate" :labe
Vue 实现部分校验
梁小茹的博客
12-12 294
实现部分校验
editor验证必填项不能为空
L_C_sunny的博客
10-10 321
editor验证必填项不能为空
vue3富文本编辑器vue-quill-editor预览
07-27
你可以使用vue-quill-editor的预览功能来实现富文本编辑器的预览效果。首先，确保你已经安装了vue-quill-editor。 ```bash npm install vue-quill-editor ``` 然后，在你的Vue组件中引入并注册vue-quill-editor。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值