富文本非空校验不能依赖required属性，因其仅对原生input/textarea生效；需通过编辑器api（如wangeditor.isempty()）或解析html提取可见文本并trim判断。
富文本编辑器的非空校验不能靠 required 属性解决——它只对原生 <input>、<textarea></textarea> 有效，而富文本内容本质是 HTML 字符串，哪怕用户没输任何字，也可能传 <p></p> 或 <p> </p> 这类“视觉为空但字符串非空”的值。
为什么 required 对富文本无效
浏览器原生校验只检查 DOM 元素的 value 或 textContent 是否为空字符串，不解析 HTML。富文本组件（如 wangEditor、Quill）通常用 div 或自定义容器承载内容，其值通过 JS 动态更新，required 完全感知不到。
-
required只在<form></form>提交时触发，且仅作用于表单控件（input、select、textarea），不支持富文本渲染容器 - 即使把富文本内容同步到隐藏
<textarea></textarea>，若未手动清空该textarea的初始值（比如默认含<p><br></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>），required仍会认为“已填” - 用户粘贴纯空格、零宽字符、
<span style="display:none">xxx</span>等情况，value.length > 0但实际无可见内容
怎么提取富文本的“真实可见内容”
核心是把 HTML 字符串转为纯文本，并剔除不可见字符。不能简单用 .replace(/]+>/g, '')，它会漏掉 、（零宽空格）、<style></style> 内联样式干扰等。
- 推荐用浏览器原生 API：
const text = new DOMParser().parseFromString(html, 'text/html').body.textContent，再调用.trim() - 若需兼容低版本或避免 DOM 解析开销，可用轻量正则组合：
html.replace(/]*>/g, '').replace(/ ||/g, ' ').replace(/\s+/g, ' ').trim() - 特别注意：wangEditor 的
editor.isEmpty()方法内部就是基于textContent判断，比手写正则更可靠，优先调用它
Vue 项目中如何集成校验逻辑
不能只依赖表单 rules 的 required: true，必须在提交前主动调用编辑器实例的方法或解析 HTML。
- 使用 wangEditor 时，在提交前调
this.$refs.editor?.isEmpty() === true，返回true表示内容为空（含<p><br></p>等） - 若用 Quill，对应方法是
quill.getText().trim() === ''；CKEditor 是editor.getData().replace(/]*>/g, '').trim() === '' - 避免在
@change时就做完整校验——频繁触发影响性能；只在点击提交按钮或submit事件中执行一次 - 校验失败后，用
this.$message.error('内容不能为空')提示，并return阻止后续接口调用，不要依赖el-form.validate()自动处理
最易被忽略的一点：富文本内容可能含恶意标签（如 <script></script>），非空校验前最好先做 XSS 清洗，否则攻击者可构造 <img src="x" onerror="alert(1)"> 绕过“空内容”判断——看似有内容，实则只是个恶意载荷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
