如何在 HTML 中添加用于检查输入元素值的正则表达式?

htmlweb developmentfront end technology更新于 2024/8/11 22:04:17

本文将介绍如何在 HTML 中添加用于检查输入元素值的正则表达式。

用于检查输入元素值的正则表达式由 HTML <input> pattern 属性指定。以下输入类型与此属性兼容:文本、密码、日期、搜索、电子邮件等。

语法

以下是 HTML <input>pattern 属性的语法。

<input pattern = "regular_exp">

为了更好地了解如何在 HTML 中添加用于检查输入元素值的正则表达式，我们来看看以下示例

对于 type= "password"

<input> 标签上的 type="password" 属性会创建一个文本字段，用户可以在其中安全地输入密码。根据浏览器的不同，输入的字符会被替换为点("•")或星号("*")。

示例

在下面的示例中，我们使用 type=" password" 的 <input> 元素。

<!DOCTYPE html>
<html>
<body>
   <form action="#">
      <label for="tutorial">Password:</label>
      <input type="password" id="tutorial" name="tutorial" pattern=".{8,}"
      title="Eight or More Characters">
      <input type="submit">
   </form>
</body>
</html>

执行上述脚本后，它将生成一个密码类型的输入字段，该字段带有一个模式，以确保其符合提交的限制，否则会显示一个警告框。

限制为三个字母的输入字段

在本例中，我们限制输入字段仅允许用户输入三个字母。

示例

考虑到以下情况，我们使用限制为三个字母的输入字段，其中不包含数字或特殊字符。

<!DOCTYPE html>
<html>
<body>
   <form action="#">
      <label for="tutorial">Country Code:</label>
      <input type="text" id="tutorial" name="tutorial"
      pattern="[A-Za-z]{3}" title=" country code"><br><br>
      <input type="submit">
   </form>
</body>
</html>

脚本执行时，将显示名为"countrycode"的输出，以及一个仅限三个字母的提交按钮。如果不符合限制，则会显示一个警告框。