ReactQuill结合Antd Form表单验证失效问题排查

我在代码中使用了Antd Form与ReactQuill组件，为字段添加了必填校验，但校验逻辑时常异常：输入内容后提交仍提示“Please enter message”，未输入时却不触发校验，仅使用ReactQuill的字段出现此问题，请问原因是什么？

代码示例 #

<Col md={24} xs={12}>
  <Form.Item 
    initialValue='' 
    name='Message' 
    label="Message" 
    required 
    rules={[{ required: true, message: "Please enter message" }]}
  >
    <ReactQuill 
      modules={modules} 
      formats={formats}
      value={this.state.Message}
      onChange={(e) => {
        this.setState({ Message: e });
      }} 
    />
  </Form.Item>
</Col>

原因分析 #

核心问题是Antd Form 无法自动同步 ReactQuill 的值到表单字段：

• 你当前通过组件自身的 state 维护 ReactQuill 的值，但 Antd Form 是通过 Form.Item 的 name 属性独立管理字段状态的，两者没有建立关联。输入内容后，Form 内部的 Message 字段仍保持初始空值，所以提交时会触发必填校验提示。
• 未输入时不触发校验，是因为 Form 没有监听 ReactQuill 的值变化，无法感知字段为空的状态，自然不会执行校验规则。

另外，ReactQuill 默认会输出包含空标签的 HTML（比如 <p><br></p>），即使你没输入实际内容，也会返回这类字符串，这也会导致 Form 的必填校验出现误判——看起来有值，但实际是无效的空内容。

解决方法 #

1. 让 ReactQuill 与 Antd Form 字段同步（核心修复）

放弃自身维护 state，直接通过 Antd Form 的表单实例来同步值：

<Col md={24} xs={12}>
  <Form.Item 
    initialValue='' 
    name='Message' 
    label="Message" 
    required 
    rules={[{ required: true, message: "Please enter message" }]}
  >
    <ReactQuill 
      modules={modules} 
      formats={formats}
      value={this.props.form.getFieldValue('Message')}
      onChange={(value) => {
        // 将ReactQuill的值同步到Form字段
        this.props.form.setFieldsValue({ Message: value });
      }} 
    />
  </Form.Item>
</Col>

注意：如果你的组件是类组件，需要确保已经用 Form.create()(YourComponent) 包裹，才能拿到 this.props.form 对象。

2. 处理空HTML标签的校验问题（可选）

添加自定义校验规则，过滤掉无实际内容的空HTML标签：

<Form.Item 
  initialValue='' 
  name='Message' 
  label="Message" 
  required 
  rules={[
    { 
      required: true, 
      validator: (_, value) => {
        // 移除所有HTML标签并去除首尾空格
        const plainContent = value.replace(/<[^>]+>/g, '').trim();
        if (plainContent) {
          return Promise.resolve();
        }
        return Promise.reject(new Error("Please enter message"));
      }
    }
  ]}
>
  {/* ReactQuill组件代码 */}
</Form.Item>

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