vue富文本编辑器必填判断

最新推荐文章于 2024-05-03 12:18:05 发布

lyy2665624982

最新推荐文章于 2024-05-03 12:18:05 发布

阅读量1.1k

点赞数 2

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/m0_56276571/article/details/129876194

版权

1、思路是拿到富文本，要判断是否有值。输入空这些都不能提交，都给一个校验

效果图：

a、html代码这里的 Editor是我的富文本组件

  <Editor
            style="z-index: 10"
            v-model="queryParams.content"
            @change="editorChange"
            :readonly="props.isDisabled"
          />

b、拿到富文本内容这里我是直接在页面获取富文本的html

// 判断富文本编辑器输入是否为空或回车
const getText = (str) => {
  return str
    .replace(/<[^<p>]+>/g, '') // 将所有<p>标签 replace ''
    .replace(/<[</p>$]+>/g, '') // 将所有</p>标签 replace ''
    .replace(/&nbsp;/gi, '') // 将所有 空格 replace ''
    .replace(/<[^<br/>]+>/g, '') // 将所有 换行符 replace ''
}
// 判断富文本是否为空
const isNull = (str) => {
  if (str == '') return true
  var regu = '^[ ]+$'
  var re = new RegExp(regu)
  return re.test(str)
}
// 富文本的改变事件  这里是vue3+ts的语法
const editorChange = (val) => {
  // 举例 拿到html
  let text = getText(val.getHtml())
  editorValue.value = isNull(text) // true表示判空  false表示不为空
  console.log(' editorValue.value===>', editorValue.value)
}