简介
@activelylearn/react-material-ui-form-validator 是一个基于 React 和 Material UI 的表单验证组件，可以用于实时验证用户输入的表单数据，以确保其符合预期。它提供了多种内置的验证规则，并支持自定义验证规则，可以帮助前端开发者快速构建出安全可靠的表单。
安装
在开始使用该组件之前，需要先安装相关的依赖包。在终端中执行以下命令即可：
npm install @activelylearn/react-material-ui-form-validator
使用
导入
导入该组件的方式如下：
import { ValidatorForm, TextValidator } from '@activelylearn/react-material-ui-form-validator';组件
ValidatorForm
ValidatorForm 是一个高阶组件，用于包裹需要进行验证的表单。它提供了多个属性用于指定表单校验及相关的配置。
<ValidatorForm onSubmit={handleSubmit} onError={handleError}>
{/*
Form elements here
*/}
</ValidatorForm>ValidatorForm 支持的属性如下：
| 属性名 | 类型 | 默认值 | 必须 | 说明 |
|---|---|---|---|---|
| onSubmit | function | 是 | 表单验证通过后的回调函数 | |
| onError | function | 是 | 表单验证失败后的回调函数 | |
| instantValidate | boolean | true | 否 | 是否即时验证表单字段 |
| debounceTime | number | 300 | 否 | 同步验证的时间间隔，即用户输入完毕后等待多长时间再开始验证，默认为 300 |
TextValidator
TextValidator 是一个基于 Material UI TextField 的验证组件，用于对用户输入的文本内容进行验证。它提供了多种内置的验证规则，可以满足大部分表单验证的需求，并支持用户自定义验证规则。
<TextValidator
label="Email"
name="email"
value={email}
validators={['required', 'isEmail']}
errorMessages={['Email is required', 'Email is not valid']}
onChange={(e) => setEmail(e.target.value)}
/>TextValidator 支持的属性如下：
| 属性名 | 类型 | 默认值 | 必须 | 说明 |
|---|---|---|---|---|
| label | string | 是 | 表单字段的标签名 | |
| name | string | 是 | 表单字段的名称 | |
| value | string | 是 | 表单字段的输入值 | |
| validators | string / array | 否 | 表单字段的验证规则，可以是字符串或字符串数组，具体规则参见下文 | |
| errorMessages | string / array | 否 | 验证失败时的错误消息，可以是字符串或字符串数组，与 validators 一一对应，具体参见下文 | |
| className | string | 否 | 自定义样式类名 | |
| onChange | function(event) | 否 | 输入框的 change 事件处理函数，用于更新表单值 | |
| onBlur | function(event) | 否 | 输入框的 blur 事件处理函数，用于进行离焦验证 | |
| error | boolean | false | 否 | 是否显示错误状态，此处提供了受控和非受控两种方式控制，可以根据实际情况选择合适的方式进行控制 |
内置验证规则
TextValidator 支持的内置验证规则如下：
| 规则名 | 说明 | 用法 |
|---|---|---|
| required | 必填项 | validators={['required']} |
| isEmail | 邮箱地址 | validators={['isEmail']} |
| isUrl | 网址地址 | validators={['isUrl']} |
| isNumber | 数字 | validators={['isNumber']} |
| isPositive | 正数 | validators={['isPositive']} |
| isNegative | 负数 | validators={['isNegative']} |
| isInt | 整数 | validators={['isInt']} |
| max | 最大值 | validators={['max:10']} |
| min | 最小值 | validators={['min:0']} |
| maxLength | 最大长度 | validators={['maxLength:10']} |
| minLength | 最小长度 | validators={['minLength:5']} |
| matchRegexp | 正则匹配，可以自定义正则表达式进行验证 | validators={['matchRegexp:^\d{6}$']} |
| isPasswordStrong | 密码强度验证(必须包含大小写字母和数字) | validators={['isPasswordStrong']} |
验证规则配置
TextValidator 的 validators 和 errorMessages 属性支持的值都是字符串或字符串数组。字符串表示单个验证规则或错误消息，字符串数组表示多个验证规则或错误消息。
字符串类型的验证规则由验证规则名和可选的参数组成，以冒号分隔。例如：'min:10' 表示最小值为 10。
示例代码
以下是一个简单的登录表单示例代码，包含用户名和密码两个字段，并使用了多个内置的验证规则和错误消息。
-- -------------------- ---- -------
------ - -------------- ------------- - ---- --------------------------------------------------
------ ------ ---- ---------------------------
------ - -------- - ---- --------
-------- ----------- -
----- ------- --------- - -------------
----- ---------- ------------ - -------------
----- ------------ - -- -- -
-- ------ --- ----
--
----- ----------- - -- -- -
-- ------ ---- -----
--
------ -
-------------- ----------------------- ----------------------
--------------
-------------
------------
-------------
------------------------ -----------
---------------------- -- ---------- ------ -- --- --------
------------- -- -------------------------
--
--------------
----------------
---------------
---------------
----------------
------------------------ -------------- --------------------
------------------------- -- ---------- --------- ---- ------- -- ----- - ---------- --- ------- ----------- ----------- --- ----------
------------- -- ----------------------------
--
------- ------------- --------------- --------------------
------
---------
----------------
--
-
------ ------- ----------结论
@activelylearn/react-material-ui-form-validator 提供了一种简单易用的表单验证解决方案，可以快速帮助前端开发者构建出安全可靠的表单。它支持多种内置的验证规则，并可以根据实际需求进行自定义扩展。希望这篇文章能够帮助大家更好地了解和使用该组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560a581e8991b448dee30