Question

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

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

更新

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

Answer 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或{ {1}}。

您的正则表达式（url）也无效。您可以尝试以下规则之一：

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

您在第二个[\+]\d{12}之前缺少\以仅匹配数字。第二种模式是第一种模式的缩小版本。

Answer 2

它已修复，只是在我的javascript中添加了这个。

/ [+] \ d {3} d {9} /。试验（PHONENO）

Answer 3

您可以为标记添加无效属性

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

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

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

HTML5 - Pattern属性不能在input元素中使用

3 个答案: