在前端开发中，表单验证是必不可少的一项内容。然而，为了减少重复的代码编写，我们通常会使用一些成熟的第三方库来提高开发效率。
这篇文章介绍一款 npm 包 validation-msgs，它是一个轻量级的表单验证库。本文将详细介绍如何使用它，并给出一个示例代码。
安装
你可以通过 npm 安装 validation-msgs 包：
npm install --save validation-msgs
然后在你的项目中引入它：
import validationMsgs from 'validation-msgs';
使用
validation-msgs 提供了几种不同的验证方式，包括必填、最小长度、最大长度、正则表达式等。下面是一个示例代码：
-- -------------------- ---- ------- --- ----- - ------------------------------------ --- ----- - - --------- ----- ---------- -- ---------- --- -------- ---------------- -- --- -------- - - --------- ----- ---------- ----------- ---------- ------------ -------- ----------- -- --------------------- ------ ----------
这段代码将对 id 为 my-input 的 input 元素进行验证。如果验证不通过，会在 input 的下方显示一个错误提示信息。
深度解析
现在让我们深入了解 validation-msgs 的一些用法和功能。
自定义错误消息
上面的示例代码中，我们提供了一个名为 messages 的对象，用于存储错误提示信息。这里的 key，比如 required 和 minLength，对应着验证规则对象 rules 中的每个属性。
你可以通过修改 messages 对象的值，自定义错误提示信息。例如：
let messages = {
required: '不能为空哦',
minLength: '只能大于等于6个字符',
maxLength: '不能超过12个字符',
pattern: '请填写字母或数字'
};这样一来，当输入不符合验证规则的时候，将会显示自定义的错误提示信息。
捕获验证状态
除了简单地提示错误信息之外，你还可以利用 validation-msgs 提供的标志属性，如 data-valid、data-errormsg，来捕获验证状态。例如：
<label for="my-input">用户名</label> <input id="my-input" type="text" name="username" data-valid="false" data-errormsg=""> <span class="error-msg"></span>
在输入框的 data-valid 属性中，如果验证通过，则为 true，否则为 false。当验证不通过时，错误提示信息将存储在 data-errormsg 属性中。
你可以利用这些标志属性来动态修改输入框的状态，从而达到更好的用户体验。
高级自定义
如果你想要更高级的自定义功能，例如自定义验证规则或显示方式，你可以利用 validation-msgs 提供的回调函数来实现。
-- -------------------- ---- -------
--- ----- - ------------------------------------
--- ----- - -
------------- ----------------- -
-- -----------------
-- -- ---- - -----
-
--
--- -------- - -
------------- ----------
--
--- ---------- - ----------------- -------- -
-- -----------
-- -------------
--
--- ---------- - ----------------- -------- -
-- -----------
-- -----------
--
--------------------- ------ --------- ----------- ------------自定义规则时，你可以使用自己的逻辑来进行验证。如果逻辑失败，返回 false，这样 validation-msgs 就可以知道验证结果并显示错误消息。
showErrMsg 和 hideErrMsg 回调函数可以让你自定义错误提示信息的显示和隐藏方式。例如，你可以向页面添加一个新的错误提示元素，并在验证不通过时显示它。
结论
在此，我们已经了解了 validation-msgs 的一些基本用法和高级自定义方式。即使你不了解太多的 JavaScript，使用这个库也非常容易。
如果你正在学习前端开发，并且需要一些方便快捷的表单验证工具，那么 validation-msgs 应该是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005694781e8991b448e4c7e