简介
mobx-form-validator 是一个基于 mobx 的表单验证器，它提供了一组通用的规则和自定义的规则，能够处理各种复杂的表单验证需求。
安装
使用 npm 进行安装：
npm install mobx-form-validator
或者使用 yarn 进行安装：
yarn add mobx-form-validator
使用
创建规则
使用 mobx-form-validator 需要先定义一组验证规则，在定义规则时可以使用 mobx 提供的 observable 和 action 来管理状态和动作。
-- -------------------- ---- -------
------ - ----------- ------- -------- - ---- -------
------ - --------- ------- - ---- ----------------------
----- ------------- -
----------- ----- - -
----- ---
------ ---
--
----------- ------ - -
----- ---
------ ---
--
---------
--- --------- -
------ -------------------------------------- -- ----- --- ----
-
-------
---------- -
----- - ----- ----- - - -----------
---------------- - --- -----------------------
----------------- - --- -------------- -------------------------------------------------------------
-
-以上代码定义了一个 UserValidator 类，它包含了两个可观察属性 value 和 errors。value 是表单中的值，errors 是每个表单域的错误信息，isValid 是是否全部通过验证。
在 validate 方法中，我们首先获取了 value 中的 name 和 email，然后通过 Required 和 Pattern 来创建规则，并将错误信息赋值给 errors 中对应的属性。
Required 和 Pattern 是 mobx-form-validator 已经封装好的验证规则，分别用于判断是否为空和是否符合正则表达式。
除了使用内置的规则，我们还可以通过 Custom 来创建自定义的规则。
-- -------------------- ---- -------
------ - ------ - ---- ----------------------
----- ----------------- -
----------- ----- - ---
----------- ----- - ---
---------
--- --------- -
------ ---------- --- ---
-
-------
---------- -
----- - ----- - - -----
---------- - --- --------- -- ------------ -- -----------
-
-以上代码定义了一个 PasswordValidator 类，它包含了一个可观察属性 value 和一个错误信息 error。这里我们通过自定义规则来判断密码长度是否符合要求。
使用规则
在表单中使用 mobx-form-validator 规则很简单，只需要将规则定义为一个可观察对象，然后在表单中使用即可。
-- -------------------- ---- -------
------ - -------- - ---- ------------------
------ ----- ---- --------
------ - ------- ----- - ---- -------
------ - -------------- ----------------- - ---- ---------------
------ - ------- - ---- ----------------------
----- ---- - ----------- -- -
----- ---- - ----------- -----------------
----- -------- - ----------- ---------------------
----- ------------ - -- -- -
-- ------------- -- ----------------- -
----------------------
- ---- -
----------------
--------------------
-
--
------ -
-----
------ ----------------------- ----------- -- --------------- - --------------- --
----------------- -- ------------------------------
------ ------------------------ ----------- -- ---------------- - --------------- --
------------------ -- -------------------------------
--------------- ---------------------- ----------- -- -------------- - --------------- --
--------------- -- ----------------------------
------- --------------------------------------
------
--
---在代码的开始，我们先创建了两个 useForm 对象 user 和 password，它们的参数分别是 UserValidator 和 PasswordValidator 的实例。我们将 useForm 对象封装了一层，方便在表单中使用。
在表单中使用时，我们通过 value 属性来获取或设置表单中的值，通过 errors 或 error 属性来获取表单中的错误信息，通过 validate 方法来校验表单中的值是否符合规则。
最后，我们在 handleSubmit 方法中判断整个表单是否都通过验证，如果是，则提交表单，否则，调用各自的 validate 方法，并展示错误信息。
总结
mobx-form-validator 是一个很好用的表单验证库，它提供了一组通用的规则和自定义的规则，能够处理各种复杂的表单验证需求。在使用时，我们只需要定义一组验证规则，然后在表单中使用即可。希望这篇文章对你在前端开发中使用 mobx-form-validator 提供了帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566c181e8991b448e3182