如何触发原生HTML验证错误来禁止输入框或文本域中的URL，而非使用自定义验证？

好问题！我太懂你不想手动维护多语言错误提示的痛点了——要给每个语言写一遍错误信息实在是麻烦，能用上浏览器原生的验证提示确实是更省心的方案。这里有几个可行的思路，帮你实现需求：

1. 优化pattern属性+实时触发原生验证 #

你之前尝试的pattern属性其实是正确的方向，问题出在默认情况下浏览器只会在表单提交时触发pattern的验证提示，而不会在用户输入时实时反馈。只要给输入框/文本域加上实时触发验证的逻辑，就能让原生错误提示及时显示，还能自动适配浏览器语言。

具体实现： #

首先，保留禁止URL的负前瞻正则作为pattern的值，然后给输入控件添加oninput事件触发reportValidity()——这个方法会立刻触发原生验证，并在不通过时显示浏览器自带的错误提示（自动匹配用户的浏览器语言）。

HTML/JSX代码示例：

<textarea 
  name="description" 
  pattern="(?i)^(?!.*(https?:\/\/|www\.)).*$"
  oninput="this.reportValidity()"
  <!-- 如果字段是必填项，加上required；可选则去掉 -->
  <!-- required -->
></textarea>

如果更习惯React的写法（避免内联事件），可以用Formik的字段组件封装：

const DescriptionField = () => {
  const [field] = useField('description');

  const handleInput = (e) => {
    e.target.reportValidity();
  };

  return (
    <textarea
      {...field}
      pattern="(?i)^(?!.*(https?:\/\/|www\.)).*$"
      onInput={handleInput}
    />
  );
};

简化提交逻辑：

用上这个方案后，你提交函数里的那堆DOM查询和setCustomValidity代码都可以删掉了！因为浏览器会自动拦截验证不通过的表单提交，并且显示原生错误提示，Formik的onSubmit只会在验证通过后才执行：

<Formik
  enableReinitialize={enableReinitialize}
  initialValues={initialValues}
  onSubmit={(values, { setSubmitting, setStatus, resetForm }) => {
    // 这里直接处理合法的提交即可，无需再手动验证URL
    this.handleSubmit(values, setSubmitting, setStatus, resetForm);
  }}
>
  {() => (
    <Form>
      <DescriptionField />
      <button type="submit">Submit</button>
    </Form>
  )}
</Formik>

2. 额外注意事项 #

• 正则兼容性：正则里的(?i)是不区分大小写的修饰符，确保能拦截HTTP://、Www.这类大写开头的URL。如果需要兼容极旧浏览器（比如IE11），可以把正则改成^(?!.*(https?:\/\/|www\.|HTTPS?:\/\/|WWW\.)).*$，不过现代浏览器基本都支持(?i)了。
• 文本域的pattern支持：大部分现代浏览器（Chrome、Firefox、Edge等）都支持textarea的pattern属性，如果需要兼容非常老的浏览器，可以考虑换成input[type="text"]，或者结合JavaScript验证兜底。
• 原生提示的样式：如果觉得原生错误提示的样式不符合你的产品风格，也可以通过CSS伪类:invalid自定义控件的样式（比如给输入框加红色边框），但提示文本依然是浏览器原生的多语言版本。

这样调整后，你既不用维护多语言的错误字符串，又能实时给用户反馈，还能利用浏览器原生的验证机制，代码也会简洁很多！

备注：内容来源于stack exchange，提问作者Emily