React Hook Form+Zod验证富文本编辑器空格校验问题求助

方案1：利用Zod的transform提取纯文本后校验 #

在Zod Schema中先将带HTML标签的内容转换为纯文本，再执行trim和长度校验，直接在校验层处理HTML结构带来的问题：

import { z } from "zod";

const SchemaEmailShareSurvey = z.object({
  // 其他字段...
  message: z
    .string({ required_error: "Message is required" })
    .transform((htmlStr) => {
      // 提取HTML中的纯文本（推荐用DOMParser，处理更可靠）
      const parser = new DOMParser();
      const doc = parser.parseFromString(htmlStr, "text/html");
      return doc.body.textContent?.trim() || "";
    })
    .min(1, { message: "Required" }),
});

若环境不支持DOMParser（如部分SSR场景），可临时用正则替代（注意正则处理HTML有局限性）：
htmlStr.replace(/<[^>]+>/g, "").trim()

方案2：在react-hook-form的Controller中预处理输入 #

在Controller的field.onChange回调里先处理TextEditor返回的HTML内容，转换为纯文本或清理空内容后再更新表单状态，让Zod原有校验规则直接生效：

<Grid className={styles.gridBox} item xs={12}>
  <Controller
    control={control}
    defaultValue={`&lt; Company Name&gt;  has invited you to participate in a feedback survey - ${formTitile}.`}
    name="message"
    rules={{}}
    render={({ field }) => {
      const handleContentChange = (htmlContent) => {
        // 提取纯文本并判断是否有效
        const parser = new DOMParser();
        const doc = parser.parseFromString(htmlContent, "text/html");
        const plainText = doc.body.textContent?.trim() || "";
        // 仅当纯文本非空时保留原HTML，否则传入空字符串触发校验
        field.onChange(plainText ? htmlContent : "");
      };

      return (
        <TextEditor
          customClass={editorHeight}
          content={field.value}
          error={errors?.message ?? ""}
          setContent={handleContentChange}
          label="Message"
        />
      );
    }}
  />
</Grid>

方案3：自定义Zod校验器检查HTML内容 #

如果需要保留HTML格式，同时确保其中的实际文本不是纯空格，可编写自定义校验函数：

import { z } from "zod";

const hasValidContent = (htmlStr: string) => {
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlStr, "text/html");
  const plainText = doc.body.textContent || "";
  return plainText.trim().length > 0;
};

const SchemaEmailShareSurvey = z.object({
  // 其他字段...
  message: z
    .string({ required_error: "Message is required" })
    .refine(hasValidContent, { message: "Required" }),
});

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