在开发一个表单时，我们通常希望能够检查用户输入的数据是否符合预期。正则表达式是一种强大的工具，可以用来指定输入数据的格式。在 HTML 中，我们可以使用正则表达式来检查输入元素的值是否符合预期。本文将介绍如何在 HTML 中添加一个用于检查输入元素值的正则表达式。
1. HTML 表单元素
HTML 表单元素常用于与用户交互以收集用户数据。以下是一些常见的表单元素：
文本框: 用于接收文本输入。
密码框: 用于接收密码输入。
选择框: 用于提供下拉选项。
单选框与复选框: 用于提供选项。
关于更多表单元素，请参见 Mozilla 开发者文档。
2. HTML 正则表达式
HTML 支持正则表达式，它可以用于验证用户输入的数据是否合法。正则表达式通常由一个模式和一些标志组成。以下是几个常见的正则表达式标志：
i: 不区分大小写。
g: 全文搜索。
m: 多行搜索。
以下是一些正则表达式示例：
// 匹配数字
/\d+/
// 匹配电子邮件地址
/^[^\s@]+@[^\s@]+\.[^\s@]+$/
关于更多正则表达式，请参见 Mozilla 开发者文档。
3. 在 HTML 中使用正则表达式
要在 HTML 中使用正则表达式，我们可以使用 <input> 元素的 pattern 属性。该属性指定一个正则表达式字符串，该字符串描述输入值应具有的格式。
例如，以下 HTML 代码将创建一个文本框，要求用户输入格式为三个数字（任意数字）：
<label>三个数字：
<input type="text" pattern="\d\d\d" required>
</label>
在该示例中，pattern 属性设置为 \d\d\d，它指定输入值应该由三个数字组成。此外，required 属性指示该文本框是必填的，用户必须输入值才能提交表单。
3.1. 检查重复密码
以下是用于检查重复密码的完整示例：
<form>
<label for="password">密码：
<input type="password" id="password" required>
</label>
<br>
<label for="confirm_password">确认密码：
<input type="password" id="confirm_password" required>
</label>
<br>
<button type="submit">提交</button>
</form>
<script>
const password = document.querySelector("#password");
const confirm_password = document.querySelector("#confirm_password");
function validatePassword() {
if (password.value !== confirm_password.value) {
confirm_password.setCustomValidity("两次输入的密码不匹配！");
} else {
confirm_password.setCustomValidity("");
}
}
password.addEventListener("change", validatePassword);
confirm_password.addEventListener("change", validatePassword);
</script>
在该示例中，我们首先定义了两个密码框，其中一个用于输入密码，另一个用于确认密码。我们还定义了一个名为 validatePassword 的函数，该函数用于检查两个密码框中的值是否匹配。如果两个值不匹配，我们使用 setCustomValidity 方法设置一个自定义验证消息，否则我们清除验证消息。
最后，我们使用 addEventListener 方法为两个密码框添加 change 事件监听器。当用户填写表单并提交时，我们的函数将检查两个密码框中的值是否匹配。
3.2. 检查日期格式
以下是用于检查日期格式的完整示例：
<form>
<label for="birthdate">出生日期（YYYY-MM-DD）：
<input type="text" id="birthdate" pattern="\d{4}-\d{2}-\d{2}" required>
</label>
<br>
<button type="submit">提交</button>
</form>
在该示例中，我们使用一个文本框来输入日期。我们使用 pattern 属性指定日期格式为 YYYY-MM-DD。这个正则表达式的形式是 \d{4}-\d{2}-\d{2}，其中 \d 匹配数字，{4} 指定匹配 4 个数字，{2} 指定匹配 2 个数字。所以这个正则表达式指定了匹配 YYYY-MM-DD 格式的日期。
3.3. 检查电子邮件地址
以下是用于检查电子邮件地址的完整示例：
<form>
<label for="email">电子邮件地址：
<input type="email" id="email" required>
</label>
<br>
<button type="submit">提交</button>
</form>
在该示例中，我们使用一个文本框来输入电子邮件地址。我们使用 type="email" 属性指定该文本框是用于输入电子邮件地址的。此外，我们使用 required 属性指示该文本框是必填的，用户必须输入电子邮件地址才能提交表单。
4. 结论
在 HTML 中使用正则表达式可以帮助我们验证用户输入的数据是否合法。我们可以使用 <input> 元素的 pattern 属性指定一个正则表达式字符串，该字符串描述输入值应该具有的格式。此外，我们还可以使用 JavaScript 来定制验证逻辑。通过使用正则表达式，我们可以提高用户输入数据的准确性和可靠性。