简介
在前端开发中，表单验证是一个必不可少的环节。而 formsy-material-ui-jhartley1 是一个基于 React 和 Material UI 的包，可以快速简单地进行表单验证。它还提供了一些附加功能，如错误提示和表单重置等。
安装
安装 formsy-material-ui-jhartley1 的最简单的方式是使用 npm：
--- ------- ---------------------------- ------
配置
导入组件：
------ ---------- ---- ----------------------------------------------
在表单中使用该组件：
-----------
------------
--------
----------------
-------------------------
--其中，name、required、hintText 和 floatingLabelText 是必需的属性，我们还可以添加其他属性来对组件进行自定义配置。
验证
要对表单进行验证，需要添加 validator 属性。例如，我们可以验证电子邮件地址：
-----------
------------
---------------------
-------------------------------
--------
----------------
-------------------------
--这里我们使用了 validations 和 validationError 属性，前者是个字符数组，包含我们需要进行验证的规则。而 validationError 是验证失败后的错误提示信息。
自定义验证规则
假设我们需要验证密码的强度，我们可以定义一个自定义方法，并在 validations 数组中添加它。例如：
-----------
---------------
--------------
----------------- -------- ------ -- -
----- ----------- - ----------------------------------------
------ ------------------------
-
--
---------------------------------------- - -----
--------
-------------------
---------------
----------------------------
--如上例所示，我们添加了 validations 属性，并使用一个自定义验证规则来检查密码的强度。由于正则表达式必须包含在函数中，因此我们将其写在函数体内。
表单提交
要访问表单数据，我们需要添加一个 onSubmit 函数。例如，我们可以在数据提交后将其打印到控制台：
----- ---------- - ------ -- -
------------------
--
------ -
-------
--------------------------
-
-- ----
---------
--在提交表单时，Formsy 会自动验证输入字段。如果表单验证失败，则不会调用 onValidSubmit 函数。
自定义样式
formsy-material-ui-jhartley1 使用 Material UI 的样式。如果需要自定义样式，可以直接覆盖标准 Material UI 样式。例如：
-------------------- -
------ -----
-这里我们指定了一个 css 类，覆盖了默认的表单控件的宽度，将其设置为 100%。
示例
以下是一个完整的示例代码：
------ ----- ---- --------
------ - ------- ---------- - ---- -----------------------------------
------ ------ ---- ---------------------------
----- --- - -- -- -
----- ---------- - ------ -- -
------------------
--
------ -
-------
--------------------------
-
-----------
------------
---------------------
-------------------------------
--------
----------------
-------------------------
--
-----------
---------------
--------------
----------------- -------- ------ -- -
----- ----------- - ----------------------------------------
------ ------------------------
-
--
---------------------------------------- - -----
--------
-------------------
---------------
----------------------------
--
------- ------------------- --------------- --------------
--
---------
---------
--
--
------ ------- ----结论
通过本文的介绍，使用 formsy-material-ui-jhartley1 包来进行表单验证应该已经不是很难了。它提供了一些很好的功能，如自定义验证规则和错误提示。当然，借助 Material UI，我们可以根据自己的需要进行自定义样式。希望这篇文章能对您的学习和开发有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005731681e8991b448e9497