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