前言：在日常的开发中，我们经常会用到表单的处理。为了方便我们快速地开发表单，社区中就出现了很多方便快捷的工具，正如今天要介绍的 npm 包 formsy-react-native，它可以更快速地帮助我们处理表单。
什么是 formsy-react-native
formsy-react-native 是一个 React Native 表单验证和输入框提示的库。它使用了 Higher-Order Components（HOC）的思想，提供了表单验证和输入框提示的接口，方便我们快速地处理表单。
安装和使用
通过 npm 可以很快地安装 formsy-react-native：
--- ------- ------------------- ------
使用 formsy-react-native 首先需要将组件包裹在 Form 组件中。然后将需要验证的输入框组件包裹在 Input 组件中即可。下面是一个简单的示例：
------ ----- ---- --------
------ - ----- ---------- ---- - ---- ---------------
------ ---- ---- ----------------------
----- --- ------- --------------- -
-------- -
------ -
------
------
---------------------
----------
---------------
-------------- --------------- ---- --
------------------- --------------- --------- ------ -- ------------- --
--
-------
-------
--
-
-上面的代码中，我们将 TextInput 组件包裹在 Input 组件中，并指定了 validations 属性和 validationErrors 属性。这样就可以对输入框进行输入的验证和提示。
Validations 和 ValidationErrors
validations 属性和 validationErrors 属性是 formsy-react-native 中比较重要的属性。它们分别用来指定验证规则和错误提示。
一个输入框可以指定多个验证规则，验证规则可以是内置的规则，也可以是自己定义的规则。下面是一些内置的规则：
- isNumeric: 判断是否为数字
- isLength: 判断长度是否符合条件
- isEmail: 判断是否为电子邮件地址
- isAlphanumeric: 判断是否为字母和数字
如果想要指定自己的验证规则，可以使用以下方式：
--------------
------------- -------- ------ -- -
------ ----- --- ------
-
--
-------------------
------------- ------ ------ -- ----
--在上面的代码中，我们自定义了一个验证规则 myValidation。它接受两个参数 values 和 value，其中 values 属性表示整个表单的值，value 表示当前输入框的值。如果验证通过返回 true，否则返回 false。
当输入框的值不符合验证规则时，formsy-react-native 会根据 validationErrors 属性中指定的错误信息进行提示。
实例：登陆表单验证
下面是一个简单的登陆表单验证的示例。它包含了两个输入框：用户名和密码。用户名必须是字母或数字构成的字符串，密码长度必须大于等于 6 个字符。
------ ----- ---- --------
------ - ----- ---------- ----- ------ - ---- ---------------
------ ---- ---- ----------------------
----- --------- ------- --------------- -
------------ - ---------- -- -
----------------------
-
-------- -
------ -
----- ----------------------------------
------
---------------------
----------
---------------
---------------------
-------------------
-------------- --------------- ---- --
-------------------
--------------- --------- ------ -- -------------
--
--
-------
------
---------------------
----------
---------------
----------------------
-------------- --------- - --
-------------------
--------- --------- ------ -- -- ----- - -----------
--
--
-------
------- ---------- --- ----------- -- --- --
-------
--
-
-在上面的代码中，我们使用了 onValidSubmit 属性指定了表单验证通过后的回调函数。当用户点击 Log in 按钮时，formsy-react-native 会先验证表单是否合法，如果合法就会调用 handleSubmit 函数，并传递表单数据作为参数。
总结
formsy-react-native 是一个方便快捷的表单验证和提示库，它使用了 HOC 的思想，可以快速地帮助我们处理表单。在使用时，我们需要注意 validations 属性和 validationErrors 属性的使用以及表单数据的处理。最后，希望本文对大家有所启发，也欢迎大家多多尝试和交流！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600560a981e8991b448dee85