首页 > 文章列表 > 如何在HTML中添加一个用于检查输入元素值的正则表达式?

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

478 2023-09-15

我们在本文中要执行的任务是如何添加一个正则表达式,以便在 HTML 中检查输入元素值。

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

语法

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

<input pattern = "regular_exp">

为了进一步了解如何添加在 HTML 中检查输入元素值的正则表达式,让我们看看以下示例

对于type="password"

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

示例

在下面的示例中,我们使用了<input>元素,其类型为”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”的输出,以及一个仅限于三个字母的提交按钮。如果不符合限制,它将显示一个警告框。

上一篇 如何在HTML中指定