无直接HTML访问权限时如何修改表单默认必填提示文本？

以下是几种无需直接修改HTML的实现方法，按推荐程度排序：

1. MutationObserver 监听动态生成元素（通用最优方案） #

多数表单的错误提示是用户触发验证后才动态插入DOM的，用MutationObserver可以监听DOM变化，在目标元素出现时自动替换文本：

document.addEventListener('DOMContentLoaded', () => {
  // 监听整个文档的子节点变化（可根据实际情况缩小监听范围，比如表单容器）
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      if (mutation.type === 'childList') {
        // 匹配所有目标错误提示元素
        const errorElements = document.querySelectorAll('.input__error-message.z-body-small');
        errorElements.forEach(el => {
          // 精准匹配原葡萄牙语文本，避免误改其他提示
          if (el.textContent.trim() === 'Esse campo é obrigatório') {
            el.textContent = '请填写此字段'; // 替换为你的自定义文本
          }
        });
      }
    });
  });

  // 启动监听，监听子节点变化及后代节点
  observer.observe(document.body, { childList: true, subtree: true });
});

2. 直接DOM替换（适用于元素初始已存在） #

如果错误提示元素在页面加载完成时就已经存在于DOM中，可直接选中并修改文本：

document.addEventListener('DOMContentLoaded', () => {
  const errorElement = document.querySelector('.input__error-message.z-body-small');
  if (errorElement && errorElement.textContent.trim() === 'Esse campo é obrigatório') {
    errorElement.textContent = '请填写此字段';
  }
});

3. CSS伪元素替换（备选方案） #

若你需要兼容不支持MutationObserver的旧环境，可使用CSS隐藏原文本并通过伪元素插入自定义内容：

.input__error-message.z-body-small {
  color: transparent;
  position: relative;
}

.input__error-message.z-body-small::after {
  content: '请填写此字段';
  position: absolute;
  left: 0;
  top: 0;
  color: inherit; /* 继承原错误文本的样式（如颜色） */
}

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