向HTML表单添加验证将确保用户以正确的格式准确地输入数据。在过去，验证表单输入需要使用JavaScript插件，但是现在大多数浏览器都有可以处理大部分验证的内置解决方案。 在本教程中，我们将向您展示如何仅使用本地HTML输入属性向表单添加验证规则。 项目概览 为了演示创建验证规则的过程，我们准备了一个简单的HTML注册表单Bootstrap 4。你可以点击下面的图片来打开一个现场演示。 布局 HTML 我们的设计包括一个带有两个输入字段和一个提交按钮的引导表单。在本例中，我们使用了3种不同类型的输入字段-文本输入、密码输入和电子邮件输入。
CSS 我们还添加了一些基本的CSS样式，以使表单更加简单。
html {
background-color:#214c84;
background-blend-mode:overlay;
display:flex;
align-items:center;
justify-content:center;
height:100%;
}
body {
background-color:transparent;
}
.registration-form {
padding:50px 0;
}
.registration-form form {
max-width:800px;
padding:50px 70px;
border-radius:10px;
box-shadow:4px 4px 15px rgba(0, 0, 0, 0.2);
background-color:#fff;
}
.registration-form form h3 {
font-weight:bold;
margin-bottom:30px;
}
.registration-form .item {
border-radius:10px;
margin-bottom:25px;
padding:10px 20px;
}
.registration-form .create-account {
border-radius:30px;
padding:10px 20px;
font-size:18px;
font-weight:bold;
background-color:#3f93ff;
border:none;
color:white;
margin-top:20px;
}
@media (max-width: 576px) {
.registration-form form {
padding:50px 20px;
}
}
验证类型 HTML 5提供了一种使用输入属性进行内联验证的好方法。有大量的属性可用，我们将只看一些最常见的。要获得完整的列表，您可以访问这个优秀的MDN指南. required 此属性指定输入字段不能为空。它要求用户在提交表单之前输入一些内容。
maxlength 和 minlength 指定用户可以在输入字段中输入的最大/最小符号数。这在密码字段中尤其有用，因为更长的密码意味着更安全的密码。
pattern 指定必须匹配以传递输入数据的正则表达式。它可以与以下输入类型一起使用：文本、搜索、url、电子邮件和密码。
