如何仅使用 HTML 创建表单验证？

HTML是一种标记语言，可用于创建Web页面和Web应用程序。在Web应用程序中，表单是用户输入数据的主要方式之一。为了确保收到正确的数据，您必须验证用户的输入。在这篇文章中，我们将介绍如何仅使用HTML来创建表单验证。

HTML表单

HTML中的表单由form元素定义。form元素具有将表单数据发送到服务器的功能。在表单之前，必须使用label元素将每个表单控件与其标签相关联。以下是一个样例：

<form>
  <label for="username">用户名：</label>
  <input type="text" name="username" id="username" required>
  <br>
  <label for="password">密码：</label>
  <input type="password" name="password" id="password" required>
  <br>
  <input type="submit" value="提交">
</form>

该代码段中的form元素具有两个控件：一个用户名输入框和一个密码输入框。submit按钮用于提交表单数据。注意每个输入框都有一个required属性，这将强制在提交表单之前输入该字段。

数据类型验证

HTML中内置了多个输入类型，包括数字，邮件，日期等。这些类型可以验证用户是否已输入正确的格式，无需涉及JavaScript代码。

例如，如果输入类型设置为“email”，则会验证输入字段中是否包含电子邮件格式。以下是一个样例：

<label for="email">电子邮件：</label>
<input type="email" name="email" id="email" required>

其他输入类型还包括：

• number：要求输入数字
• date：要求输入日期
• url：要求输入网址

自定义错误消息

如果输入框未成功验证，则默认显示的错误消息可能不太友好。但幸运的是，可以通过使用HTML5的自定义验证消息来更改错误消息的行为。

以下是一个样例：

<label for="email">邮箱地址：</label>
<input type="email" name="email" id="email" required
       oninvalid="this.setCustomValidity('请输入正确的邮箱地址')"
       onchange="this.setCustomValidity('')">

结尾的 oninvalid 和 onchange 属性定义了自定义验证消息。如果输入框未成功验证，则 setCustomValidity() 将显示自定义错误消息。理解这个代码片段的核心是 onchange 属性。如果给出错误消息，服务器会保持错误消息，直到用户使用该字段，因此必须清除错误消息以确保用户正确输入。

总结

这篇文章介绍了如何仅使用HTML来创建表单验证。我们对表单元素，输入类型和自定义错误消息进行了讨论。HTML的表单验证虽然不如JavaScript灵活，但它可以帮助我们快速编写基本的表单验证。