web前端开发中，原来页面表单提交验证这么简单，感觉自己以前都白学了

向您的HTML表单添加验证将确保您的用户以正确的格式正确输入数据。过去，验证表单输入需要使用JavaScript插件，但是如今，大多数浏览器都具有可以处理大多数验证的内置解决方案。

在本教程中，我们将向您展示如何仅使用本机HTML输入属性将验证规则添加到表单中。

项目概况

为了演示创建验证规则的过程，我们使用Bootstrap 4准备了一个简单的HTML注册表单。您可以单击下面的图像打开实时演示。

布局

HTML

我们的设计包含一个Bootstrap表单，其中包含几个输入字段和一个Submit按钮。在此示例中，我们使用了3种不同类型的输入字段-文本输入，密码输入和电子邮件输入。

< 表单 >创建帐户< 输入 类 =“表单控制项”type=“text”name=“username”maxlength=“15”minlength=“4”pattern=“^ [a-zA-Z0-9_。-] * $“id=”用户名“占位符 =“需要用户名” >< 输入 类别 =“表单控制项”类型 =“密码”名称 =“密码”minlength=“6”id=“密码”“  占位符 =”密码“必填 >< 输入 类别 =“表单控制项”类型 =“电子邮件”名称 =“电子邮件”id=“电子邮件”占位符 =“电子邮件”必填 >< 按钮 类 =“btnbtn-primarybtn-blockcreate-account“  类型 =”提交“>创建帐户

CSS

我们还添加了一些基本的CSS样式，以使表单看起来更简单。

html {  background-color：＃214c84 ;  background-blend-mode：overlay;  显示：flex;  align-items：center;  证明内容：center;  背景图片：网址（../../assets/img/image4.jpg）;  背景重复：no-repeat;  背景尺寸：cover;  高度：100％ ;}正文 {  background-color：transparent;}.registration-form {  padding：50px0;}.registration-form  表格 {max-width：800px ;  填充：50px70px ;  border-radius：10px ;  box-shadow：4px4px15px  rgba（0，0，0，0.2）;  背景颜色：#fff ;}.registration-form  形式 h3 {  font-weight：bold;  底边距：30px ;}.registration-form  .item {  border-radius：10px ;  底边距：25px ;  填充：10px20px ;}.registration-form  .create-account {  border-radius：30px ;  填充：10px20px ;  字体大小：18px ;  font-weight：bold;  背景颜色：＃3f93ff ;  边框：无；  颜色：白色  页边距：20px ;}@ media（max-width：576px）{.  registration -form  form {    padding：50px20px ;  }}

验证类型

HTML5提供了一种使用输入属性进行内联验证的简便方法。有大量可用的属性，我们仅介绍一些最常见的属性。

需要

此属性指定输入字段不能为空。它要求用户在提交表单之前输入一些内容。

< 输入 类别 =“表单控制项”类型 =“电子邮件”名称 =“电子邮件”ID=“电子邮件”占位符 =“需要电子邮件” >

最大长度和最小长度

指定用户可以在输入字段中输入的最大/最小符号数。这在密码字段（其中较长的密码表示更安全的密码）中特别有用。

< 输入 类别 =“表单控制项”类型 =“密码”名称 =“密码”minlength=“6”id=“密码”占位符 =“必须输入密码” >

模式

指定一个正则表达式，必须匹配该正则表达式才能传递输入的数据。它可以与以下输入类型一起使用：文本，搜索，URL，电子邮件和密码。

< 输入 类别 =“表单控制项”类型 =“文本”名称 =“用户名”maxlength=“15”minlength=“4”pattern=“^ [a-zA-Z0-9_.-] * $”id=“用户名”占位符 =“用户名”必填 >

Bootstrap Studio中的表单验证

Bootstrap Studio提供了一种快速简便的方法来验证表单，而无需编写任何代码。该应用程序具有内置控件，可让您快速设置您可能需要的所有验证规则。

有关如何在项目中创建表单验证的更详细的教程，请访问Bootstrap Studio网站。

源码演示

最终的效果是非常的大气，而且页面加载也比较流畅，想要获取源码的小伙伴可以在我的前端交流学习群：109029339下载，我发给各位去本地演示，同时我这里还有一些web前端学习资料，想要的也可以免费分享给各位，但希望各位拿到资料后能认真的学习，好了，今天的分享就到这里，码字不易，记得点个赞再走哦！