HTML5表单的自动验证、取消验证、自定义错误信息的操作
我要评论1、自动验证
通过在元素中使用属性的方法，该属性可以实现在表单提交时执行自动验证的功能。下面是关于对元素内输入内容进行限制的属性的指定。
| 属性 | 说明 |
|---|---|
| required | 输入内容是否不为空 |
| pattern | 输入的内容是否符合指定格式 |
| min、max | 输入的数值是否在min~max范围 |
| step | 判断输入数值是否为step的倍数 |
1.1 required 属性
required 属性的主要目的是确保表单控件中的值已填写，一旦为某个输入型控件设置了 required 属性，就必须填写此项，否则无法提交表单。
属性用法如下：
<form>
电子邮箱：<input type="email" required /></br>
<input type="submit" value="提交"/>
</form>执行结果：
1.2 pattern 属性
pattern 属性的主要目的是根据表单控件上设置的格式规则验证输入是否为有效格式。通过在 input 元素中使用 pattern 属性，并将属性值设为某个格式的正则表达式，该属性实现在提交表单时会检查其内容是否符合给定格式。
属性用法如下：
<form>
请输入内容：<input type="text" pattern="[0-9][A-Z]{3}" placeholder="一个数字和三个大写字母"/>
<input type="submit" value="提交"/>
</form>执行结果：
1.3 min、max 和 step 属性
通过设置 min 和 max 属性，可以将输入控件的数值输入范围限定在最低值和最高值之间。设置其 step 属性能够制定输入值递增或递减的梯度。
属性用法如下：
数值1：<input type="number" value="25" min="10" max="100" step="5"/></br> 数值2：<input type="range" value="45" min="0" max="100" step="5"/>
执行结果：
2、checkValidity 显示验证
除了对 input 元素添加属性进行元素内容有效性的自动验证，所有的表单元素和输入元素（包括：select 和 textarea）在其 DOM 节点上都有一个 checkValidity 方法。当想要覆盖浏览器的默认的验证和反馈过程时，可以使用这个方法。checkValidity 方法根据验证检查成功与否，返回 true 或 false，与此同时会告诉浏览器运行其检查。
【实例】使用 checkValidity 方法验证用户输入的电子邮箱格式是否正确。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="pan_junbiao的博客">
<title>checkValidity显示验证</title>
<script type="text/javascript">
function check() {
var email = document.getElementById("email");
if (email.value == "") {
alert("请输入电子邮箱");
return false;
}
else if (!email.checkValidity()) {
alert("请输入正确的电子邮箱");
return false;
}
else {
alert("您输入的电子邮箱格式正确");
return true;
}
}
</script>
</head>
<body>
<form onsubmit="return check()">
<label for="email">电子邮箱：</label>
<input name="email" id="email" type="email" />
<input type="submit" value="提交" />
</form>
</body>
</html>执行结果：
3、取消验证
HTML5 提供了两种方法用于取消表单验证。
第一种方法是利用 form 元素的 novalidate 属性，它可以关闭整个表单验证。使用方法如下：
<form novalidate> </form>
第二种方法是利用 input 元素或 submin 元素的 formnovalidate属性，利用 input 元素的 formnovalidate 属性可以让表单验证对单个 input 元素失效。使用方法如下：
<input type="email" formnovalidate />
4、自定义错误信息
HTML5 中许多新的 input 元素都带有对于输入内容的有效性的校验，如果检查不通过，浏览器会针对该元素提供错误信息。但有时候开发者不想使用这些默认的错误提示信息，而想使用自己定义的错误提示信息；或者有时，想给某个文本框增加一种错误提示信息。
【实例】使用 setCustomValidity 方法来自定义错误信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="pan_junbiao的博客">
<title>自定义错误信息</title>
<script>
function check() {
var pass1 = document.getElementById("pass1");
var pass2 = document.getElementById("pass2");
var email = document.getElementById("email");
if (pass1.value != pass2.value) {
pass2.setCustomValidity("密码不一致。");
}
else {
pass2.setCustomValidity("");
}
if (!email.checkValidity()) {
email.setCustomValidity("请输入正确的电子邮箱地址。");
}
}
</script>
</head>
<body>
<form id="testform">
密码：<input type=password name="pass1" id="pass1" /><br />
确认密码：<input type=password name="pass2" id="pass2" /><br />
电子邮箱：<input type=email name="email1" id="email" /><br />
<div><input type="submit" onClick="return check();" /></div>
</form>
</body>
</html>执行结果：
到此这篇关于HTML5表单的自动验证、取消验证、自定义错误信息的文章就介绍到这了,更多相关HTML5表单自动验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
wordpress添加Html5的表单验证required方法小结
这篇文章主要介绍了wordpress添加Html5的表单验证required方法小结,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参2020-08-18
这篇文章主要介绍了HTML5表单验证特性的一些知识点，本文通过实例代码截图的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-10
很多朋友进行表单验证的时候，都是自己用jquery或者js手工验证，或者用一下jquery插件进行验证。感觉html5自带验证不是很好用，下面小编给大家分享使用纯html5编写的一个表2017-09-12- 这篇文章主要介绍了HTML5 表单验证失败的提示语问题的相关资料,需要的朋友可以参考下2017-07-13
- 在HTML5 中，在增加了大量的表单元素与属性的同时，也增加了大量在提交时对表单与表单内新增元素进行内容有效性验证的功能，接下来我们来讲一下自动验证，需要的朋友参考2017-01-11
- 这篇文章不会去讨论简单的input type，本文想把重点放在HTML5表单验证机制上。主要介绍是HTML5是如何利用约束验证API来检查表单的输入数据的，当然，本文会涉及到很多其它2016-12-20
- 表单验证就是在表单提交服务器前对其进行一系列的检查并通知用户纠正错误，本篇文章主要介绍了详解HTML5中表单验证的8种方法，具有一定的参考价值，有兴趣的可以了解一下。2016-12-19
- 这篇文章主要介绍了使用HTML5的表单验证的简单示例,包括手机端利用的一个小例子分享,需要的朋友可以参考下2015-09-09
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
本篇文章小编为大家介绍，HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法。需要的朋友参考下2013-04-24
最新评论