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

文章目录

向您的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.234.244.181,欢迎您的访问!

温馨提示 : 非特殊注明,否则均为李联华的博客原创文章,本站文章未经授权禁止任何形式转载
文章链接:https://www.ooize.com/the-easiest-way-to-add-validation-to-a-form.html

订阅文章

在下面输入您的电子邮件地址以订阅我们的文章

留下评论

Loading...