简介
react-validating-controlled 是一个用来验证表单输入的 React 组件。在编写表单时，尤其是在前端表单设计中，我们经常需要对表单输入进行信任和安全性验证。这个组件可以在用户输入值变化时执行验证，并显示错误消息。
下面将介绍如何使用这个 npm 包。
安装
首先，我们需要安装这个 npm 包，可以使用 npm 命令行工具：
--- ------- --------------------------- --
或者使用 yarn：
---- --- ---------------------------
使用
react-validating-controlled 可以很容易地嵌入到 React 表单中，比如：
------ ----- ---- --------
------ - -------------------- - ---- ------------------------------
----- ------ ------- --------------- -
------------------ -
-------------
---------- - -
----- ---
--
-
------------ - --- -- -
-------------------
-- --------------------------
-
---------------- - ------ -- -
--------------- ---- ---
-
-------- -
----- - ---- - - -----------
------ -
----- -----------------------------
-------
-----
---------------------
------------
--------------------------------
-------------------------
------------------------------
--
--------
------ ------------- -------------- --
-------
--
-
-
------ ------- -------上面的例子中，我们在表单中引入了 ValidatingControlled 组件，可以看到有几个重要的属性。
value属性：组件展示的值。onChange属性：当输入改变时，我们可调用handleNameChange方法更新值。validators属性：要使用的验证函数数组。errorClassName属性：自定义错误消息的样式，可以在 CSS 文件中设置它。
这些属性将会在下面详细介绍。
属性
value
组件展示的值，它是必需的。
--------------------- ------------- --
onChange
当输入改变时，我们可调用 onChange 方法更新值，并为输入执行验证。
--------------------- ------------- ----------------------- --
validators
要使用的验证函数数组，它提供了标准的验证函数，比如“必填”和“电子邮件”。
--------------------- ------------- ----------------------- -------- --
目前可用的验证函数列表如下：
required：输入必填digital：输入必须是数字email：输入必须是电子邮件地址max-length：输入字符数不能超过指定数量min-length：输入字符数不能低于指定数量pattern：输入必须符合指定正则表达式
我们也可以通过 addValidator 来自定义一个新的验证函数：
------ ----- ---- --------
------ - --------------------- ------------ - ---- ------------------------------
--------------
----- -----------
---------------- -------- -
----- - ---------- --------- - - --------
-- ---------- -- ------------ - ---------- -
------ --------- ------------ -----
-
-- ---------- -- ------------ - ---------- -
------ ---------- ------------ -----
-
-- ------------------- -
------ -----------
-
-- ------------------------- -
------ -----------
-
------ -----
--
---
----- ------ ------- --------------- -
----- - -
--------- ---
---------------- ---
--
-------------------- - ---------- -- -
--------------- -------- ---
-
--------------------------- - ----------------- -- -
--------------- --------------- ---
-
-------- -
----- - --------- --------------- - - -----------
------ -
------
-------
---
---------------------
----------------
------------------------------------
-------------
- ----- ----------- -------- - ---------- -- ---------- -- - --
--
------------------------------
--
--------
-------
-----
---------------------
-----------------------
-------------------------------------------
-------------
- ----- ---------- --
-
----- -------------------
-------- - --------- -------- --
--
--
------------------------------
--
--------
-------
--
-
-errorClassName
自定义错误消息的样式，可以在 CSS 文件中设置它。
--------------------- ------------- ------------------------------ --
这个属性是可选的，默认为 validating-input-error。
结尾
以上就是使用 react-validating-controlled 的详细介绍，其中我们也介绍了如何添加自定义验证函数。这个 npm 包是一个非常有用组件，它可以帮助您在应用程序中更好地发挥优势。
代码示例：react-validating-controlled-demo。
希望这篇文章对你有帮助，感谢您的阅读！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5f51ab1864dac671f1