HTML5表单的主动验证、取消验证、自界说错误信息的操作

1、主动验证

通过在元素中利用属性的方法，该属性可以实现在表单提交时实行主动验证的功能。下面是关于对元素内输入内容进行限定的属性的指定。

1.1 required 属性

required 属性的主要目的是确保表单控件中的值已填写，一旦为某个输入型控件设置了 required 属性，就必须填写此项，否则无法提交表单。

属性用法如下：

实行效果：

1.2 pattern 属性

pattern 属性的主要目的是根据表单控件上设置的格式规则验证输入是否为有用格式。通过在 input 元素中利用 pattern 属性，并将属性值设为某个格式的正则表达式，该属性实现在提交表单时会检查其内容是否符合给定格式。

属性用法如下：

实行效果：

1.3 min、max 和 step 属性

通过设置 min 和 max 属性，可以将输入控件的数值输入范围限定在最低值和最高值之间。设置其 step 属性可以或许制定输入值递增或递减的梯度。

属性用法如下：

实行效果：

2、checkValidity 显示验证

除了对 input 元素添加属性进行元素内容有用性的主动验证，全部的表单位素和输入元素（包括：select 和 textarea）在其 DOM 节点上都有一个 checkValidity 方法。当想要覆盖浏览器的默认的验证和反馈过程时，可以利用这个方法。checkValidity 方法根据验证检查成功与否，返回 true 或 false，与此同时会告诉浏览器运行其检查。

【实例】利用 checkValidity 方法验证用户输入的电子邮箱格式是否准确。

实行效果：

3、取消验证

HTML5 提供了两种方法用于取消表单验证。

第一种方法是利用 form 元素的 novalidate 属性，它可以关闭整个表单验证。利用方法如下：

第二种方法是利用 input 元素或 submin 元素的 formnovalidate属性，利用 input 元素的 formnovalidate 属性可以让表单验证对单个 input 元素失效。利用方法如下：

4、自界说错误信息

HTML5 中很多新的 input 元素都带有对于输入内容的有用性的校验，假如检查不通过，浏览器会针对该元素提供错误信息。但偶然候开发者不想利用这些默认的错误提示信息，而想利用本身界说的错误提示信息；或者偶然，想给某个文本框增加一种错误提示信息。

【实例】利用 setCustomValidity 方法来自界说错误信息。

实行效果：

到此这篇关于HTML5表单的主动验证、取消验证、自界说错误信息的文章就介绍到这了,更多相干HTML5表单主动验证内容请搜索脚本之家以前的文章或继承浏览下面的相干文章，希望大家以后多多支持脚本之家！