向您的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前端学习资料，想要的也可以免费分享给各位，但希望各位拿到资料后能认真的学习，好了，今天的分享就到这里，码字不易，记得点个赞再走哦！
网友评论