>
<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表单。您应该使用有效数据和无效数据进行测试，以确保在所有情况下验证都能正常工作。您也可以使用自动测试工具或库来执行更全面的测试。
