简介
在Web开发中，前端验证是一个很重要的环节。大部分情况下，传统的表单验证已经不能满足我们的需要。doormen是一个强大的表单验证库，可以帮助我们在前端对数据格式进行更细致、高效、简单的验证。
今天，我们将带您详细了解doormen的使用方法，以及如何为表单添加验证器。
安装
doormen使用npm进行安装，只需在终端输入以下命令即可：
--- ------- ------- ------
使用方式
在项目中引入doormen包，将其暴露给一个全局函数，然后使用该函数实例化一个表单验证对象。你可以通过以下代码来实现：
------ - --------- - ---- ---------- ----- --------- - --- ------------
验证规则
doormen提供了很多常见的验证规则，例如：required（必填）、email（电子邮件格式）、minLength（最小长度）以及integer（整数）。你可以在这里了解到所有可用的验证规则。
你可以通过以下代码添加一个验证规则：
----------------------- -------- --------------
其中：
email表示附加到的元素名称；email表示实际的规则（你可以在上面的链接中了解到所有的规则）；'您输入的电子邮件无效。'是当验证失败时显示的错误消息。
验证表单
当需要验证表单时，我们只需要调用表单对象的validate()方法即可。
----- ---- - -----------------------------------
------------------------------- ------- -- -
-----------------------
-- -------------------------- -
-- ------
- ---- -
-- ------
-
---上面的代码监听了一个表单事件，然后处理该事件中的表单验证。
在实际应用中，我们会常常遇到需要异步验证的情况。例如：当我们需要调用后端接口验证某个值时，就不能在监听器中使用上面的代码片段。doormen提供了一个更灵活的方法，让你能够根据自己的需要去验证表单。
----- ---- - -----------------------------------
------------------------------- ----- ------- -- -
-----------------------
-- ------ ------------------------------ -
-- ------
- ---- -
-- ------
-
---上面的代码使用了async/await进行异步验证。每个验证器都使用Promise来处理验证。
自定义错误消息
你可以使用自己的错误消息替换doormen的默认错误消息。只需要在构建验证器实例时传递错误消息即可。
----- --------- - --- -----------
--------- -
--------- -----------
------ ---------------
-------- ---------
-
---你可以在messages对象中添加任意验证规则的错误消息。这些错误消息将在表单验证失败时显示。
示例代码
------ - --------- - ---- ----------
----- --------- - --- -----------
--------- -
--------- -----------
------ ---------------
-------- ---------
-
---
----------------------- -------- ---------------
--------------------- ---------- -----------------
----- ---- - -----------------------------------
------------------------------- ----- ------- -- -
-----------------------
-- ------ ------------------------------ -
-- ------
- ---- -
-- ------
-
---总结
doormen是一个非常完善的前端表单验证库，它不仅提供了丰富的验证规则，而且还支持自定义错误消息。使用doormen，我们可以轻松地构建表单验证，并且可以快速地将其集成到我们的项目中。希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/67357