HTML表单和约束验证的完整指南

在本文中，我们查看HTML表单字段和HTML5提供的验证选项。我们还将研究如何通过使用CSS和JavaScript来增强它们。

钥匙要点

通过引入自动化许多验证过程的新输入类型和属性，可以增强形式验证，从而减少了广泛的JavaScript。 HTML5中的约束验证允许浏览器在提交之前根据指定的规则自动检查用户输入，增强用户体验和数据完整性。

> 客户端验证虽然有助于捕获常见错误，但必须补充服务器端验证，以确保数据安全性和完整性。

• >自定义JavaScript输入应在可能的情况下避免，因为它们使可访问性复杂并可能与本机浏览器函数冲突。
• > CSS可用于基于其验证状态样式的输入字段，其伪级为：有效和：无效，允许对用户输入进行动态反馈。
> HTML5中的约束验证API启用HTML无法处理的自定义验证方案，例如比较两个字段或异步检查，增强形式功能和用户交互。
• >
• 什么是约束验证？
• 每个表单字段都有目的。而且这个目的通常受到矛盾的约束，或者规定了应该和不应将其输入每个表单字段的规则。例如，电子邮件字段将需要有效的电子邮件地址；密码字段可能需要某些类型的字符，并且具有最少的必需字符。文本字段可能会限制可以输入多少个字符。
>
• >现代浏览器能够检查用户观察到这些约束是否存在，并在违反这些规则时警告它们。这被称为contraint验证。
>

>客户端与服务器端验证

>大多数JavaScript代码在语言处理早期所处理的客户端表单验证的早期写作。即使在今天，开发人员也花费大量时间编写功能来检查字段值。在现代浏览器中，这仍然需要吗？可能不是

。在大多数情况下，这实际上取决于您要做的事情。

>

，但首先，这是一个很大的警告信息：

>客户端验证是一种良好的效果，可以防止在应用程序浪费时间和带宽将数据发送到服务器之前的常见数据输入错误。它不能替代服务器端验证！

> 始终对数据服务器端进行消毒。并非每个请求都来自浏览器。即使这样做，也无法保证浏览器验证了数据。任何知道如何打开浏览器的开发人员工具的人也可以绕过您精心制作的HTML和JavaScript。

> html5输入字段

html提供：

• 用于多行文本框
• 用于选项的下拉列表
• for…buttons

，但您将最常使用：

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

类型属性设置了控制类型，并且有很大的选择：

> > type 描述 按钮 没有默认行为的按钮 复选框 一个支票/勾号 颜色 彩色拾取器 日期 一年，月和一天的选择日期 DateTime-Local 日期和时间挑选器 电子邮件 电子邮件输入字段 文件 文件拾取器 隐 一个隐藏的字段 图像 显示由SRC属性定义的图像的按钮 月 一个月和年度的选手 数字 一个编号输入字段 密码 密码输入字段，带有晦涩的文字 收音机 单选按钮 范围 滑块控件 重置 一个按钮将所有表单输入其默认值的输入（但避免使用此），因为它很少有用） 搜索 搜索条目字段 提交 表单提交按钮 电话 电话号码输入字段 文本 文本输入字段 时间 没有时区的时间选择器 URL URL输入字段 星期 一周和年度选手 如果您省略类型属性或不支持选项，则浏览器会返回文本。现代浏览器对所有类型都有良好的支持，但是旧浏览器仍将显示一个文本输入字段。

其他有用的属性包括：

属性 描述 接受 文件上传类型 alt 图像类型的替代文本 自动完成 用于现场自动完成的提示 自动对焦 重点字段在页面加载上 捕获 媒体捕获输入方法 检查 检查复选框/收音机 禁用 禁用控件（不会验证或提交其价值） 形式 使用此ID与表格相关联 形式 在提交和图像按钮上提交的URL 输入模式 数据类型提示 列表 自动完成选项的ID 最大限度 最大值 最大长度 最大弦长 最小 最小值 最小长度 最小字符串长度 姓名 控制的名称，提交给服务器 图案 正则表达模式，例如一个或多个大写字符的[A-Z] 占位符 当字段值为空时，占位符文字 可读 该字段不是可编辑的，但仍将得到验证和提交 必需的 需要该字段 尺寸 控制大小（通常在CSS中覆盖） 拼写检查 设置真或错误的拼写检查 src 图像URL 步 数字和范围的增量值 类型 现场类型（见上文） 价值 初始值 html输出字段

以及输入类型，HTML5提供仅读取输出：

• >输出：计算或用户操作的文本结果
• 进度：具有值和最大属性的进度栏
• 米：可以根据设定的值，最小，最大，低，高和最佳属性在绿色，琥珀和红色之间变化的比例

>输入标签

>字段应具有关联的，您可以将其包裹在元素上：>

或使用for for属性将字段的ID链接到标签：>

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

标签对于可访问性很重要。您可能已经遇到了使用占位符来节省屏幕空间的表格：

一旦用户键入某些内容，

占位符文本即使是一个空间也会消失。显示标签比强迫用户记住该领域想要的更好！

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

>输入行为

>字段类型和约束属性会更改浏览器的输入行为。例如，一个数字输入显示移动设备上的数字键盘。该字段可能会显示旋转器和键盘上/向下光标按下将增加并减小值。>

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

大多数字段类型都是显而易见的，但是有例外。例如，信用卡是数字的，但是输入16位数字时的增量/减少旋转器是没有用的，而且很容易上下。最好使用标准文本类型，但将InputMode属性设置为数字，该属性显示了适当的键盘。设置自动完整=“ cc-number”还建议任何预先配置或先前输入的卡号。

使用正确的字段类型和自动更正提供的好处，在JavaScript中很难实现。例如，某些移动浏览器可以：

>通过使用摄像头扫描卡来导入信用卡详细信息

>导入SMS

发送的一次性编码

>自动验证

浏览器确保输入值遵守由类型，最小，最大步骤，最小值，最大长度，模式和所需属性定义的约束。例如：
• >试图提交空价值会阻止表单提交，并在Chrome中显示以下消息：>

启发者将不允许在1到100范围之外的值。如果您键入不是数字的字符串，则会出现类似的验证消息。

所有，没有一行JavaScript。

您可以通过以下方式停止浏览器验证

<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

>将Novalidate属性添加到元素

>将formnaloalication属性添加到提交按钮或图像>

创建自定义JavaScript输入 >如果您正在编写新的基于JavaScript的日期条目组件，请停下来远离键盘！

>

>编写自定义输入控件很困难。您必须考虑鼠标，键盘，触摸，语音，可访问性，屏幕尺寸以及JavaScript失败时会发生什么。您还可以创建不同的用户体验。也许您的控件优于台式机，iOS和Android上的标准日期选择器，但是陌生的UI会使某些用户感到困惑。

开发人员选择创建基于JavaScript的输入的主要原因有三个主要原因。

>

1。标准控件很难样式

> CSS样式是有限的，通常需要黑客攻击，例如在伪元素之后用标签的::覆盖输入。情况正在改善，但质疑任何优先级的设计优先于功能的设计。>

2。现代类型不支持旧浏览器

本质上，您正在编码Internet Explorer。 IE用户不会获得约会选择器，但仍然可以以yyyy-mm-dd格式输入日期。如果您的客户坚持使用，请仅在IE中加载polyfill。不需要负担现代浏览器。

>

3。您需要一种新的输入类型，该类型从未在

之前实施过

这些情况很少见，但始终从适当的HTML5字段开始。它们很快，甚至在脚本加载之前就可以工作。您可以根据需要逐步增强字段。例如，洒水的JavaScript可以确保日历事件的结束日期发生在开始日期之后。

>

摘要：

>避免重新发明HTML控件！

> CSS验证样式

>您可以将以下伪级应用于输入字段，以根据当前状态进行样式：

selector 描述 ：重点 焦点的领域 ：焦点 一个元素包含一个带有焦点的字段（是的，它是家长选择器！） ：焦点可见 由于键盘导航，元素具有重点，因此需要使用焦点戒指或更明显 ：必需的 具有所需属性的字段 ：选修的 没有必需属性的字段 ：有效的 已通过验证的字段 ：无效的 尚未通过验证的字段 ：用户录音 用户与它进行交互后已通过验证的字段（仅Firefox） ：用户活跃 用户与它进行交互后尚未通过验证的字段（仅Firefox） ：内部 该值在数字或范围输入的范围内 ：Outrange 该值超出数字或范围输入的范围 ：禁用 具有禁用属性的字段 ：启用 没有禁用属性的字段 ：只读 具有只读属性的字段 ：read-write： 没有只读属性的字段 ：检查 检查的复选框或广播按钮 ：不定 不确定的复选框或无线电状态，例如所有无线电按钮未选中 ：默认 默认提交按钮或图像 >您可以使用::占位符式元素为输入的占位符文字设计：

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

上面的选择器具有相同的特异性，因此顺序可能很重要。考虑此示例：

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

>无效的输入具有红色文本，但仅应用于具有禁用属性的输入 - >，因此所有启用的输入均为黑色。 >浏览器在页面加载上应用验证样式。例如，在以下代码中，每个无效字段都会有一个红色边框：>

用户在与表单交互之前，用户面对一组艰巨的红色框。在第一次提交或更改值之后显示验证错误将提供更好的体验。那就是javaScript介入…

>

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

> JavaScript和约束验证API

约束验证API提供表单自定义选项，可以增强标准HTML字段检查。您可以：

>停止验证，直到用户与字段进行交互或提交表单

>

显示带有自定义样式的错误消息
提供仅在HTML中不可能的自定义验证。当您需要比较两个输入时，通常需要这是必要的，例如，当您输入电子邮件地址或电话号码时，检查“新”和“确认”密码字段具有相同的值，或确保一个日期是另一个日期。 >
形式验证
>在使用API​​之前，您的代码应通过将表单的Novalidate属性设置为true（与添加NovAlidate属性相同）来禁用默认验证和错误消息： 然后，您可以添加事件处理程序，例如表单提交时：>
>处理程序可以使用checkVality（）或reportVality（）方法检查整个表单是有效的，当所有表单的输入都是有效时，它们返回true。 （区别在于checkVality（）检查是否有任何输入是否受到约束验证。）

>

Mozilla Docs解释：

<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

在每个无效的字段上也触发了无效的事件。这不会冒出气泡：必须将处理程序添加到使用它的每个控件中。

>

<span><span><span><input</span> type<span>="number"</span> min<span>="1"</span> max<span>="100"</span> required /></span>
</span>

>现在有效的表格可以产生进一步的验证检查。同样，一个无效的形式可能会突出显示无效的字段。

>

>字段验证

单个字段具有以下约束验证属性：

>

<span>/* blue placeholder on email fields */
</span><span>input<span><span>[type="email"]</span>::placeholder</span> {
</span>  <span>color: blue;
</span><span>}
</span>

willvalidate：如果元素是约束验证的候选者，则返回tru

>验证信息：验证消息。如果字段有效，这将是一个空字符串。

vality：一个有效性的对象。当字段有效时，这具有有效的属性集为TRUE。如果是错误的，则以下一个或多个属性将是正确的：
• > >有效性状态 描述 .badinput 浏览器无法理解输入 .customerror 设置了自定义有效性消息 .patternmismatch 该值与指定的模式属性不匹配 .rangeoverflow 该值大于最大属性 .rangeunderflow 该值小于最小属性 .Stepmismatch 该值不符合步骤属性规则 .toolong 字符串长度大于最大属性 。过短 字符串长度小于最小属性 .typemismatch 该值不是有效的电子邮件或URL .valueMissing 所需的值是空的

单个字段具有以下约束验证方法：

>
• > setCustomVality（消息）：为无效字段设置错误消息。当字段有效或字段将永远无效时，必须传递一个空字符串。>
> checkVality（）：当输入有效时，返回true。 valid.valid属性执行同样的事情，但是checkVality（）也触发了现场无效的事件，这可能很有用。
validateForm（）处理程序函数可以在每个字段中循环循环，并在必要时将无效类应用于其父元素：>

假设您的HTML定义了一个电子邮件字段：

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

当未指定电子邮件或无效时，该脚本将无效类应用于
。提交表单时，CSS可以显示或隐藏验证消息：
创建自定义表单验证器
<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>
>以下演示显示了需要用户名以及电子邮件地址，电话号码或两者兼而有之的示例联系表
<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>
看到笔 约束验证API示例by sitepoint（@sitepoint） 在Codepen上。
>使用名为FormValidate的通用表单验证类实现。实例化对象时会传递表单元素。可以设置可选的第二个参数：
当用户与之交互时， tay验证每个字段
false（默认值）在第一个提交之后验证所有字段（此后发生字段级验证）
>
>
formvalidate对象监视以下两个：
• >
  • focusOut事件，然后检查单个字段
  • 表格提交事件，然后检查每个字段

  >均调用.ValidateField（field）方法，该方法检查字段是否通过标准约束验证。当它这样做时，分配给该字段的任何自定义验证功能依次执行。所有人都必须返回正确才能有效。

  >

  >无效的字段将无效的类应用于该字段的父元素，该类别使用CSS显示红色帮助消息。

  >最后，当整个表单有效时，对象调用自定义提交功能：>

  或者，您可以使用标准AddeventListener来处理表单提交事件，因为FormValidate会在表单无效时防止进一步的处理程序运行。

  形成技巧

  <span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
  </span>

  表格是所有Web应用程序的基础，开发人员花费大量时间来操纵用户输入。约束验证得到很好的支持：浏览器可以处理大多数检查并显示适当的输入选项。

  >建议：
  在可能的情况下，请使用标准HTML输入类型。设置最小，最大，步骤，最小值，最大值，模式，必需，输入模式和自动完成属性。

  >

  如有必要，请使用一些JavaScript启用自定义验证和消息。

  对于更复杂的字段，逐渐增强了标准输入。

  最后：
  • >忘记Internet Explorer！
  • >
  >除非您的客户主要是用户，否则无需实施您自己的后备验证功能。所有HTML5输入字段都在IE中工作，但可能需要更多的用户工作。 （例如，IE不会检测到您何时输入无效的电子邮件地址。）您仍然必须验证服务器上的数据，因此请考虑使用该数据作为IE错误检查的基础。
  • > HTML表格和约束验证的常见问题（FAQ）
  >
  html形式验证的重要性是什么？它确保用户输入表单的数据在发送到服务器之前符合某些标准。这不仅可以维持数据的完整性，还通过提供有关输入数据的正确性的立即反馈来增强用户体验。没有表单验证，就有可能会收到不正确，不完整甚至恶意数据的风险，这些数据可能导致各种问题，包括数据损坏，安全漏洞和系统崩溃。

  > HTML5如何改进形式验证？

  html5引入了几个新的形式元素和属性，这些元素和属性使形式验证变得更加容易，更有效。例如，它提供了新的输入类型，例如电子邮件，URL和数字，它们会根据类型自动验证输入数据。它还介绍了所需的新属性，模式和最小/最大属性，使您可以在输入数据上指定各种约束。此外，HTML5提供了一个内置验证API，使您能够使用JavaScript执行自定义验证。

  我可以在没有JavaScript的情况下执行表单验证吗？

  是的，您可以使用HTML5执行基本表单验证独自的。 HTML5提供了几种新的输入类型和属性，使您可以在输入数据上指定各种约束。例如，您可以使用所需的属性来强制执行字段，以执行特定格式的模式属性以及为数值输入设置范围的最小/最大属性。但是，对于更复杂的验证，您仍然需要使用JavaScript。错误消息。您可以使用有效状态对象的setCustomVality方法为字段设置自定义错误消息。此方法采用一个字符串参数，当字段无效时，该参数将成为字段的验证消息。您可以响应无效事件调用此方法，该事件是在字段失败验证时触发的。

  >

  >如何禁用html5 form验证？

  >您可以通过添加添加html5表单验证来禁用html5 form验证Novalidate属性属于表单元素。当存在此属性时，浏览器将在提交时对表格进行任何验证。如果您要在服务器端或使用自定义JavaScript上处理验证，这可能很有用。
  如何在html5？
  中验证多个字段，不提供构建 - 在一起验证多个字段的方法中。但是，您可以使用JavaScript实现此目标。您可以编写自定义验证功能，该功能检查多个字段的值，并在不符合所需标准的情况下设置自定义有效性消息。您可以根据表单的提交事件或字段的输入/更改事件来调用此功能。
  >如何根据html5？ >

  >如何在html5？

  html5中执行异步验证。但是，您可以使用JavaScript实现此目标。您可以编写执行异步操作（例如AJAX请求）的自定义验证功能，并根据结果设置自定义有效性消息。您可以根据字段的输入/更改事件或表单的提交事件来调用此功能。

  >

  >如何在HTML5表单验证中样式？ HTML5形式验证中的消息由浏览器确定，不能使用CSS直接设计。但是，您可以使用JavaScript创建自定义错误消息，并根据需要进行样式。您可以使用验证API来确定字段何时无效并相应地显示自定义错误消息。

  >如何测试HTML表单的验证？

  >您可以测试验证的验证通过将各种类型的数据输入到字段中并试图提交表格，一种HTML表单。您应该使用有效数据和无效数据进行测试，以确保在所有情况下验证都能正常工作。您也可以使用自动测试工具或库来执行更全面的测试。

以上是HTML表单和约束验证的完整指南的详细内容。更多信息请关注PHP中文网其他相关文章！