什么是 material-error-messages？
material-error-messages 是一个用于显示表单验证信息的 npm 包。它基于 Google 的 Material Design，为用户提供了清晰、易懂和美观的错误提示。
material-error-messages 内置了多个常见的表单验证，例如必填、最大长度、最小长度、邮箱格式等。并且，如果需要自定义验证逻辑，也提供了相应的接口。
如何安装 material-error-messages？
你可以在项目目录下使用 npm 安装 material-error-messages：
npm install material-error-messages
如何使用 material-error-messages？
在 HTML 中引入 material-error-messages.min.js 和 material-error-messages.min.css
在需要使用 material-error-messages 的页面中引入它的样式文件和脚本文件：
<link href="./node_modules/material-error-messages/dist/material-error-messages.min.css" rel="stylesheet"> <script src="./node_modules/material-error-messages/dist/material-error-messages.min.js"></script>
配置表单项
在表单项上添加必要的 HTML 属性，需要如下几个：
name：表单项的名称label：表单项的标签data-validate：表单项的验证规则
示例代码如下：
-- -------------------- ---- -------
------
---- -------------------
------ -----------
---------------
-----------
------------------------ ---------- ------------
---- -----------------------------
------
-------初始化 material-error-messages
在页面加载完成后，您需要初始化 material-error-messages。此时，material-error-messages 将遍历整个表单中配置了 data-validate 属性的表单项，并为其绑定验证事件。
示例代码如下：
<script>
window.addEventListener('load', function () {
new MaterialErrorMessages();
});
</script>自定义验证函数
如果您需要更加自定义的表单验证逻辑，material-error-messages 提供了 setValidator 方法，您可以传入一个函数，以便在验证时调用。
示例代码如下：
-- -------------------- ---- -------
--------
------------------------------- -------- -- -
--- ------------- - --- ------------------------
------------------------------------ -------- ------- -
------ ----------------------
---
---------------------------------- -------- ------- -
------ ----- - - --- --
---
-- ----------
----------------------------------------------- ---------- ---------
--------------------------------------------- ---------- ------
---
---------总结
material-error-messages 可以为您提供友好的表单验证提示，并且您可以自由定制验证逻辑。希望这篇文章可以帮助读者更好地使用 material-error-messages。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560c181e8991b448df0ae