HTML5 - 模式属性不能在输入元素中使用答案

【问题标题】：HTML5 - Pattern attribute can't be used in input elementHTML5 - 模式属性不能在输入元素中使用
【发布时间】：2025-12-26 07:45:07
【问题描述】：

我目前有一个电话号码的输入元素并尝试使用模式属性，但它拒绝这样做。它说“验证（HTML5）：模式不是元素输入的有效属性”！当我将类型更改为“文本”时，它说 模式属性仅在标题存在时才有效！

<input type="number" class="form-control"data-require="" id="Mobile" placeholder="Mobile No" autocomplete="off" pattern="[\+]\d{3}d{9}" required>

更新：

我添加了标题属性，它现在可以工作了！但我唯一的问题是，当我点击提交时，即使格式不匹配，它也会提交表单。

【问题讨论】：

你尝试添加title属性了吗？
我更新了我的问题，请检查
例如：[\+]\d{3}d{9} 你的意思是d 还是\d？另外，如果type 是数字，这里的目标是什么？保证长度？为什么不只拥有\d{12}？

标签： html forms validation input

【解决方案1】：

<input> 在没有title 属性的情况下应该是有效的（在https://validator.nu/ 上验证）：

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <input type="text" class="form-control" data-require="" id="Mobile" placeholder="Mobile No" autocomplete="off" pattern="[\+]\d{3}d{9}" required>
  </body>
</html>

其他更改：

属性data-require前缺少一个空格。
pattern 属性仅允许用于以下类型：email、password、search、tel、text 或 url。

您的正则表达式 ([\+]\d{3}d{9}) 也无效。您可以尝试以下规则之一：

[\+]\d{3}\d{9}
[\+]\d{12}

您在第二个 d 之前缺少 \ 以仅匹配数字。第二个模式是第一个模式的缩小版。

【讨论】：

我写的模式是数字格式为：+997566666666。这不能在国际上使用吗？
你知道你错过了第二个 d 上的 \
@SebastianBrosch - 更不用说如果它应该是 \d 它只是检查它的长度是否为 12 位。
由于您使用的是number 类型的输入，您也可以将最小值设置为100000000000，将最大值设置为999999999999，以确保其长度为12 位。跨度>
还有+ 字符？

【解决方案2】：

已修复，刚刚添加到我的 javascript 中。

/[+]\d{3}d{9}/.test(PhoneNo)

【讨论】：

【解决方案3】：

你可以给标签添加oninvalid属性

<input type="text" name="HasAPattern" pattern="\w{3}" title="Enter 3 characters" oninvalid="setCustomValidity('Needs to match patern')" >

HTMLSelectElement.setCustomValidity() 方法将选择元素的自定义有效性消息设置为指定消息。使用空字符串表示该元素没有自定义有效性错误。

您也可以在其中使用event.preventDefault();之类的代码，如果无效则取消提交

【讨论】：