正则表达式需求：验证<p>标签间至少3个非空有效字符用于表单校验

可以使用以下正则表达式满足需求：

^<p>\s*(?:\S\s*){3,}<\/p>$

正则说明 #

• ^<p>：强制匹配字符串开头的固定<p>标签
• \s*：匹配标签后可能存在的任意数量空白字符（包括0个）
• (?:\S\s*){3,}：核心校验部分，非捕获组结构：
  • \S：匹配任意非空白的有效字符（字母、数字、中文、标点等都算）
  • \s*：允许有效字符后跟着任意数量空白
  • {3,}：要求这样的有效字符至少出现3次，确保总非空有效字符数≥3
• <\/p>$：强制匹配字符串结尾的固定</p>标签

校验示例验证 #

• <p></p>：无有效字符 → 不匹配（false）
• <p> </p>：仅含空白 → 不匹配（false）
• <p>Hello</p>：含5个有效字符 → 匹配（true）
• <p>Hello </p>：含5个有效字符（末尾空白不影响） → 匹配（true）

表单校验代码示例 #

以常用的校验库用法为例，直接将正则传入matches()方法即可：

// 示例基于Yup校验库
import * as Yup from 'yup';

const formSchema = Yup.object().shape({
  editorContent: Yup.string()
    .required('请填写内容')
    .matches(/^<p>\s*(?:\S\s*){3,}<\/p>$/, '内容至少需要包含3个非空有效字符')
});

其他校验库只需按规则传入正则即可，注意部分场景下需转义特殊字符。

内容的提问来源于stack exchange，提问作者MEAG