HTML | 模式属性

HTML 中的模式属性是一种用于验证用户输入的方法。它可以确保用户输入符合所需的格式。模式属性可以应用于大多数 HTML 输入元素。

语法

模式属性使用正则表达式语法进行定义。语法可以是针对整个字符串的正则表达式或针对输入字符串的子字符串的正则表达式。

<input type="text" pattern="[A-Za-z]{3}">

这个例子将模式应用于 input 元素，并仅允许输入由三个字母组成的字符串。

属性值

整个字符串的正则表达式

整个字符串的正则表达式应跨越整个输入字符串，从第一个字符开始匹配，直到最后一个字符。如果整个字符串与正则表达式不匹配，将显示一个验证错误。

<input type="text" pattern="[0-9]{5}">

这个例子将模式应用于 input 元素的整个字符串，并仅允许输入五位数字。

子字符串的正则表达式

子字符串的正则表达式应针对输入字符串的子字符串进行匹配。如果输入字符串的任何部分（或子字符串）与正则表达式不匹配，就会显示一个验证错误。

<input type="text" pattern="\d{3}-?\d{2}-?\d{4}">

这个例子将模式应用于 input 元素的子字符串，并允许输入多种电话号码格式（例如，xxx-xx-xxxx 或 xxxxxxxxxx）。

其他属性

required

必填项可以与模式属性一起使用，以确保用户输入字段。如果用户不输入任何内容，将显示一个验证错误。

title

title 属性可以显示应该输入哪些格式的消息（例如：“请输入三个字母”）。

示例代码

<form>
  <label for="zip">Zip Code:</label>
  <input type="text" id="zip" name="zip" pattern="[0-9]{5}" required title="Please enter a valid zip code">
  <br><br>
  <label for="phone">Phone Number:</label>
  <input type="tel" id="phone" name="phone" pattern="\d{3}-?\d{2}-?\d{4}" required title="Please enter a valid phone number">
  <br><br>
  <input type="submit" value="Submit">
</form>

此代码将生成一个表单，其中包括两个输入字段（zip 和 phone），并要求用户输入必填信息。模式属性用于限制 zip 输入为 5 个数字，而 phone 输入可以具有不同的格式（如 xxx-xx-xxxx 或 xxxxxxxxxx）。如果用户未输入必填字段，则将显示相关的验证错误。