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

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

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

语法

以下是 HTML `` `pattern` 属性的语法。

<input pattern = "regular_exp">

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

对于 type="password"

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

示例

在以下示例中，我们使用 `type="password"` 属性的 `` 元素。

<!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”的输出，以及一个仅限于三个字母的提交按钮。如果它不匹配限制，它将显示一个警告框。

更新于： 2022-12-15

108 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告