HTML5 提供了一些强大的表单验证功能，可以在客户端验证用户输入数据的有效性。其中包括在 input 元素上使用一些属性来指定所需的验证类型和错误消息。但是，这些错误消息通常是英文的，并且可能对用户不太友好。在本文中，我们将介绍如何设置自定义 HTML5 字段验证消息来改进这种情况。
设置属性和错误消息
为了设置自定义验证消息，我们需要使用 setCustomValidity 方法。该方法允许我们将自定义错误消息设置为特定字段的验证消息。
下面是一个简单的示例，演示如何在 input 元素上设置自定义错误消息：
<input type="email" required oninvalid="this.setCustomValidity('请输入有效的电子邮件地址')" onchange="this.setCustomValidity('')" />在上面的代码中，我们使用了 required 属性来指定该字段是必填的，并使用 oninvalid 事件处理程序来设置自定义错误消息。如果用户未输入有效的电子邮件地址，则会显示我们提供的错误消息。
请注意，在更改输入值时，我们还需要将自定义验证消息设置为空字符串，以便在下一次验证时不会出现冗余消息。
同样地，我们也可以在其他属性（例如 pattern）中使用 setCustomValidity 方法设置自定义错误消息。
定义多语言错误消息
如果您的站点支持多种语言，则应该根据用户选择的语言来设置自定义错误消息。在这种情况下，我们可以使用 JavaScript 中的对象来存储所有可能的语言和对应的错误消息，然后根据用户选择的语言动态设置错误消息。
以下是一个示例代码，展示如何根据用户选择的语言设置自定义错误消息：
-- -------------------- ---- -------
------- -----------------------
------- ---------------------------
------- ----------------------
---------
------ ------------ -------- ----------------------------------------------- ------ ------------------------------------- --
--------
----- ------------- - -
--- -
------ ------- ----- - ----- ----- ---------
--
--- -
------ ---------------
-
--
-------- --------------------------------- -------- -
----- -------- - ---------------------------------------------------
-- ------------------------ -- ------------------------------ -
---------------------------------------------------------
-
-
---------在上面的代码中，我们首先定义了一个 errorMessages 对象，其中包含英语和中文两种语言的错误消息。然后，在 setCustomValidityByLanguage 函数中，我们获取用户选择的语言并使用 type 参数来查找正确的错误消息。最后，我们使用 setCustomValidity 方法将错误消息设置为指定字段的验证消息。
结论
通过设置自定义 HTML5 字段验证消息，我们可以改进表单验证的用户体验，尤其是在多语言站点上。这种技术还可以确保用户输入的数据有效性，并且不需要发送到服务器进行验证，从而提高网站的性能和响应速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10676
