向表单添加验证的最简单方法

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

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

项目概况

为了演示创建验证规则的过程，我们使用Bootstrap 4准备了一个简单的HTML注册表单。您可以打开本网站的code online进行实时演示。

效果图

布局

HTML

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

< div 类= “注册表单” > 
    <表单> 
        < h3 类= “文本中心” >创建帐户</ h3 > 
        < div 类= “表单组” > 
            <输入 类别= “表单控制项”  type = “ text”  name = “ username”  maxlength = “ 15”  minlength = “ 4”  pattern = “ ^ [a-zA-Z0-9_。-] * $“  id = ”用户名“ 占位符= “ 需要用户名” > 
        </ div > 
        < div 类= “表单组” > 
            <输入 类别= “表单控制项” 类型= “密码” 名称= “密码”  minlength = “ 6”  id = “密码” “ 占位符= ”密码“ 必填> 
        </ div > 
        < div  class = ” form-group“ >
            <输入 类别=“ form-control item” 类型= “ email” 名称= “ email”  id = “ email” 占位符= “ Email” 必需> 
        </ div > 
        < div  class = “ form-group” > 
            <按钮 类= “ btn btn- primary btn-block create-account“ 类型= ”提交“ >创建帐户</按钮> 
        </ div > 
    </表单> 
</ div >

CSS

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

html {
   background-color：＃214c84 ;
  background-blend-mode：overlay;
  显示：flex;
  align-items：center;
  证明内容：center;
  背景图片：url（../../assets/img/image4.jpg）;
  背景重复：no-repeat;
  背景尺寸：cover;
  高度：100％ ;
}

正文{
   background-color：transparent;
}

.registration-form {
   padding：50px  0 ;
}

.registration-form 表格{
   max-width：800px ;
  填充：50px  70px ;
  border-radius：10px ;
  box-shadow：4px  4px  15px  rgba（0，0，0，0.2）;
  背景颜色：#fff ;
}

.registration-form 形式 h3 {
   font-weight：bold;
  底边距：30px ;
}

.registration-form  .item {
   border-radius：10px ;
  底边距：25px ;
  填充：10px  20px ;
}

.registration-form  .create-account {
   border-radius：30px ;
  填充：10px  20px ;
  字体大小：18px ;
  font-weight：bold;
  背景颜色：＃3f93ff ;
  边框：无；
  颜色：白色
  页边距：20px ;
}

@ media（max-width：576px）{.
   registration -form  form {
     padding：50px  20px ;
  }
}

验证类型

HTML5使用输入属性为内联验证提供了一种很好的简便方法。有大量可用的属性，我们仅介绍一些最常见的属性。有关完整列表，您可以访问此出色的MDN指南。

需要

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

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

最大长度和最小长度

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

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

模式

指定一个正则表达式，必须匹配该正则表达式才能传递输入的数据。它可以与以下输入类型一起使用：文本，搜索，URL，电子邮件和密码。如果您不熟悉正则表达式，可以查看我们的教程“ 20分钟内学习正则表达式”。

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

完整代码：https://https://www.ooize.com/assets/uploads/2020/12/the-easiest-way-to-add-form-validation-1-1.zip

©️李联华的博客网 当前IP地址：3.15.211.19，归属地:俄亥俄州Dublin ，欢迎您的访问！