React表单中required触发的默认错误消息无法修改样式如何解决

原生浏览器的表单验证提示气泡是浏览器内置UI，不同浏览器的实现差异很大，修改样式的方案分为两类，可根据你的兼容性需求选择：

方案1：用CSS伪类修改webkit内核浏览器的默认气泡样式 #

该方案不需要修改现有JS逻辑，直接添加CSS即可生效，仅支持Chrome、Edge、Safari等webkit内核浏览器，代码示例：

/* 整个提示气泡容器 */
::-webkit-validation-bubble {
  background: #fff2f2;
  border: 1px solid #ff4d4f;
  border-radius: 4px;
  padding: 8px 12px;
}
/* 气泡箭头 */
::-webkit-validation-bubble-arrow {
  background: #ff4d4f;
}
/* 提示消息文本 */
::-webkit-validation-bubble-message {
  color: #cf1322;
  font-size: 14px;
}

该方案可以直接适配你现有reportValidity的逻辑，不需要改动JS代码，缺点是Firefox等非webkit浏览器不生效。

方案2：全浏览器兼容的自定义验证提示实现 #

该方案完全替换浏览器默认提示，样式100%可控，也不影响你原有reportValidity的校验逻辑，实现步骤如下：

1. 给form标签添加novalidate属性，禁用浏览器默认的验证提示弹出
2. 监听表单字段的invalid事件，阻止默认行为，同时收集错误信息
3. 自定义错误提示组件，自行控制样式、位置
4. 原有reportValidity的校验逻辑可以保留，它会触发字段的invalid事件，和自定义逻辑完全兼容

代码示例：

import React, { useState, useRef } from 'react';

function MyForm() {
  const formRef = useRef();
  // 存储每个字段的错误信息
  const [errors, setErrors] = useState({});

  // 处理字段验证失败事件
  const handleInvalid = (e) => {
    // 阻止默认气泡弹出
    e.preventDefault();
    const field = e.target;
    setErrors(prev => ({
      ...prev,
      [field.name]: field.validationMessage
    }));
  };

  // 处理字段输入时清空对应错误
  const handleInput = (e) => {
    const fieldName = e.target.name;
    if (errors[fieldName]) {
      setErrors(prev => ({...prev, [fieldName]: ''}));
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (formRef.current.reportValidity()) {
      // 验证通过，执行你的后续逻辑
      console.log('表单校验通过');
    }
  };

  return (
    <form ref={formRef} onSubmit={handleSubmit} novalidate>
      <div>
        <label>用户名：</label>
        <input
          type="text"
          name="username"
          required
          onInvalid={handleInvalid}
          onInput={handleInput}
        />
        {/* 自定义错误提示，样式完全自己控制 */}
        {errors.username && <span className="error-tip">{errors.username}</span>}
      </div>
      <button type="submit">提交</button>
    </form>
  );
}

自定义样式示例：

.error-tip {
  display: block;
  margin-top: 4px;
  padding: 2px 6px;
  font-size: 12px;
  color: #fff;
  background: #ff4d4f;
  border-radius: 2px;
}

该方案兼容性最好，所有浏览器都能统一展示效果，也可以灵活调整提示的位置、动画等效果。

方案3：自定义提示文本+webkit样式修改 #

如果不需要自定义提示的位置，只需要改提示的内容和webkit下的样式，可以在invalid事件里调用setCustomValidity设置自定义的提示文本，再配合方案1的CSS修改样式，代码示例：

const handleInvalid = (e) => {
  e.target.setCustomValidity('该字段为必填项，请填写内容');
};
// 输入时清空自定义提示，避免一直校验不通过
const handleInput = (e) => {
  e.target.setCustomValidity('');
};

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