HTML5表单验证实战：required/pattern/checkValidity与自定义错误信息

脚本专家 · 发表于 2 小时前

在Web前端开发中，表单验证是保证用户输入合法性的关键环节。HTML5提供了一套原生的表单验证机制，包括自动验证属性、JS验证方法、取消验证以及自定义错误信息。本文将逐一讲解这些技术的使用方法与适用场景。

一、自动验证属性

通过给表单元素添加特定属性，浏览器会在提交时自动执行验证。常用的属性如下：

- required：输入内容不能为空。
- pattern：输入内容必须匹配指定的正则表达式。
- min、max：限制数值输入的最小值和最大值。
- step：限制输入值必须是指定步长的倍数（如step=“5”表示只能输入5的倍数）。

1.1 required 属性
设置required后，用户必须填写该项才能提交表单。示例代码：

<form>
电子邮箱：<input type="email" required /><br />
<input type="submit" value="提交" />
</form>

复制代码

1.2 pattern 属性
通过正则表达式验证输入格式。例如要求输入一个数字后跟三个大写字母：

<form>
请输入内容：<input type="text" pattern="[0-9][A-Z]{3}" placeholder="一个数字和三个大写字母" />
<input type="submit" value="提交" />
</form>

复制代码

1.3 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" />

复制代码

二、使用checkValidity方法进行程序化验证

除了属性声明式验证，所有表单元素及输入元素（包括select、textarea）都拥有checkValidity方法。该方法返回布尔值，true表示验证通过，false表示未通过，同时浏览器会触发默认的验证UI。当不需要默认的弹出提示或需要自定义验证逻辑时，可以调用此方法。

下面是一个结合checkValidity验证邮箱格式的完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>

复制代码

该示例中，先检查是否为空，再通过checkValidity判断格式，最后返回验证结果。

三、取消验证

有时需要允许某些表单或特定控件跳过验证，HTML5提供了两种取消方式：

- 在form标签上添加novalidate属性，使整个表单不进行验证。

<form novalidate>
</form>

复制代码

- 在input或submit元素上添加formnovalidate属性，仅让该元素不参与验证。

<input type="email" formnovalidate />

复制代码

四、自定义错误信息

默认的浏览器错误提示往往不够友好或不符合业务场景。通过setCustomValidity方法，可以设置自定义的验证错误信息。调用该方法时传入错误提示字符串，若传入空字符串则清除自定义错误。

以下示例演示了密码确认与邮箱格式的自定义错误提示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>

复制代码

注意：如果逻辑中同时使用了checkValidity和setCustomValidity，setCustomValidity会覆盖默认的验证消息。另外，只有在用户提交表单时，自定义错误才会显示。

总结：HTML5表单验证机制让前端开发者无需依赖额外JS库即可实现基础验证，结合checkValidity方法可以灵活控制验证流程，而setCustomValidity则提供了定制化错误提示的能力。合理运用这些特性，能显著提升表单交互体验与数据质量。

热心网友1 · 发表于 1 小时前

非常感谢楼主的详细讲解！HTML5原生验证确实非常方便，平时做表单时我也经常用 `required` 和 `pattern`，减少了大量手写 JS 判断的工作。你提到的 `setCustomValidity` 在需要定制化提示时尤其好用，我之前遇到的一个坑是：一旦调用了 `setCustomValidity`，即使后来输入正确了，也需要手动清空（设为空字符串），否则浏览器会一直报错，这个在帖子里也提到了，很实用。另外提醒一下，有些旧版浏览器对 `checkValidity` 支持不够好，可以结合 polyfill 来兼容。总之干货很多，收藏了！

HTML5表单验证实战：required/pattern/checkValidity与自定义错误信息

Re: HTML5表单验证实战：required/pattern/checkValidity与自定义错误信息

指导单位

旗下站点

联系我们