vue 3 校验富文本是否为空需清洗 html 后判断纯文本：用正则去除标签并 trim，若结果长度为 0 则为空；element plus 中需在 rules 定义自定义 validator，并通过 @change 实时校验，同时确保 content 为响应式 ref。
Vue 3 中校验富文本内容是否为空，关键在于**不能只判断字符串是否为 "" 或 null**——因为富文本编辑器（如 @vueup/vue-quill）通常默认生成带 HTML 标签的空内容，例如 <p><br></p> 或 <div><br></div>。直接用 content.trim() === "" 会误判为“有内容”，导致校验失效。
识别真正的空内容
需清洗 HTML 后提取纯文本再判断：
- 用正则或 DOM API 去除所有标签，保留换行和空格
- 对结果做
.trim()，再判断长度是否为 0 - 常见空内容示例：
<p><br></p>、<div></div>、<p> </p>
在 Element Plus + Quill 场景下的验证写法
若使用 el-form 管理表单，富文本字段（如 content）需在 rules 中定义自定义校验器：
content: [
{
validator: (rule, value, callback) => {
if (!value || typeof value !== 'string') {
return callback(new Error('内容不能为空'));
}
// 清洗 HTML：移除所有标签，保留换行，再 trim
const text = value.replace(/]+>/g, '').replace(/ /g, ' ').trim();
if (text.length === 0) {
callback(new Error('请输入有效内容'));
} else {
callback();
}
},
trigger: 'change' // 推荐用 change，因富文本 content 变化不触发 blur
}
]
配合 Quill 编辑器的事件联动
富文本组件（如 <quill-editor></quill-editor>）通常提供 @text-change 或 @change 事件。建议在该事件中主动触发表单校验，确保实时反馈：
- 绑定
@change="onContentChange" - 在
onContentChange中调用formRef.value.validateField('content') - 避免只依赖提交时校验，提升用户体验
补充：避免响应式丢失导致校验失效
若富文本内容通过 v-model:content 绑定，且初始值是空字符串或未初始化，需确保 content 是响应式 ref：
- 声明为
const content = ref('<p><br></p>')而非ref('') - 在表单重置时，显式恢复为标准空结构，如
content.value = '<p><br></p>' - 必要时在 watch 中监听变化并同步更新校验状态
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
