在前端开发过程中，对表单输入的校验是非常常见的需求。material-ui-validation 是一个方便易用的 npm 包，旨在为 React 和 Material-UI 应用程序提供表单验证功能。本文将介绍如何使用 material-ui-validation 进行表单验证，并提供示例代码。
安装
你可以通过 npm 安装 material-ui-validation：
npm install material-ui-validation
使用
要使用 material-ui-validation，你需要将提供给验证器的规则封装到一个验证器函数中。然后，将该函数与 ValidatorForm 组件一起使用，以便在使用 Material-UI 表单元素时执行校验。下面是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------- ---- -------------------------
------ --------- ---- ------------------------
------ ------------ ---- ---------------------------
----- -------- - -------- -- -
----- ------ - ---
-- ------------------ -
--------------- - -----
-
-- ------------------ -
--------------- - -----
-
------ -------
--
----- --------- ------- --------------- -
------------------ -
-------------
---------- - -
--------- ---
--------- ---
--
-
-------- -
------ -
-------------- ------------------------ -----------------------
----------
-----------------------
---------------
-----------
---------------------------
----------------- -- --------------- --------- ------------------ ---
--
--- --
----------
----------------------
---------------
---------------
---------------------------
----------------- -- --------------- --------- ------------------ ---
--
--- --
------------- ---------- ------------- ------- --
----------------
--
-
-------- - -- -- -
---------------------
--
------- - -------- -- -
-------------------- --------
--
-在上面的示例中，我们定义了 validate 函数，它接收一个包含表单值的对象并返回一个包含错误消息的对象。然后我们使用 ValidatorForm 组件来包装我们的表单，并将 onSubmit 属性绑定到我们想在表单提交时触发的函数。我们还将 onError 属性绑定到我们想在表单提交后发现错误时触发的函数。
规则
在 validate 函数中，你可以使用多种规则来校验表单输入。以下是一些常见的规则：
必填规则
在输入不能为空时使用。例：
if (!values.username) errors.username = '必填';最小长度
确保输入值的长度不小于指定值。例：
if (values.username.length < 6) errors.username = '用户名长度需大于 6';最大长度
确保输入值的长度不大于指定值。例：
if (values.username.length > 20) errors.username = '用户名长度需小于 20';电子邮件格式
验证输入值是否为合法的电子邮件地址。例：
if (!/\S+@\S+\.\S+/.test(values.email)) errors.email = '请输入正确格式的邮箱地址';数字格式
验证输入值是否为数字。例：
if (isNaN(values.age)) errors.age = '请输入数字';最小值
确保输入值不小于指定值。例：
if (values.age < 18) errors.age = '你还未满 18 岁';最大值
确保输入值不大于指定值。例：
if (values.age > 100) errors.age = '你已经太老了';正则表达式
确保输入值符合指定的正则表达式。例：
if (!/^[a-zA-Z\-]+$/.test(values.name)) errors.name = '请输入合法的姓名';
结语
material-ui-validation 是一个方便易用的 npm 包，使表单验证变得轻松简单。在本文中，我们学习了如何使用 material-ui-validation 进行表单验证，并提供了示例代码和几种常用的规则。如果你想了解更多关于 material-ui-validation 的资料，请访问官方文档。希望本文对你对于表单验证的学习和实践有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b181e8991b448e2f37