简介
react-validation-mixin 是一个 React 组件，可以帮助开发者方便地实现前端表单验证。该组件支持多种验证规则，包括必填、邮箱、电话、URL 等。同时，也支持自定义验证规则。该组件只需要引入一个 mixin，即可在组件内部使用。本文将介绍该组件的使用方法及示例代码。
使用方法
安装
使用该组件前，需要先安装它。可以通过 npm 进行安装：
npm install react-validation-mixin --save
引入
组件安装后，需要在 React 组件中引入它。引入方法如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- -------------------------
------ --- ---- --------------
----- ------ ------- --------------- -
------------------ -
-------------
---------- - -
----- ---
------ ---
------ ---
-------- ---
--------- ---
--
------------------- - -
----- --------------------------------------
------ -----------------------------------------------
------ ----------------------------------------------
-------- ---------------------------------------------------------------------------------------
--------- ----------------------------------------------
--
--------------------- - ---------------------------------
--------------- - ---------------------------
----------------- - -----------------------------
-
-------- -
------ -
----- -----------------------------
-----
------ -------------------- --------
------
-----------
-----------
-----------------------
------------------------
------------------------
--
-------------------------
------
-----
------ ---------------------- --------
------
------------
------------
------------------------
------------------------
------------------------
--
--------------------------
------
-----
------ ---------------------- --------
------
-----------
------------
------------------------
------------------------
------------------------
--
--------------------------
------
-----
------ -------------------------- --------
------
-----------
--------------
--------------------------
------------------------
------------------------
--
----------------------------
------
-----
------ ---------------------------- --------
------
---------------
---------------
---------------------------
------------------------
------------------------
--
-----------------------------
------
------- -----------------------------
-------
--
-
-
------ ------- -------------------在代码中，Validation(MyForm) 将 MyForm 组件包裹起来，使其成为 Validation 组件的子组件。这样，MyForm 就可以使用 Validation 组件提供的表单验证功能。同时，还需要引入 Joi 包，该包用于定义表单验证规则。
验证规则
在 MyForm 组件中，需要定义各个表单项的验证规则。这些规则定义在 validatorTypes 对象中。该对象的键名为表单项的名称，键值为该表单项的验证规则。例如：
this.validatorTypes = {
name: Joi.string().required().label('Name'),
email: Joi.string().email().required().label('Email'),
phone: Joi.string().regex(/^\d{10}$/).label('Phone'),
website: Joi.string().regex(/^https?:\/\/(?:www\.)?([\w-]+\.[\w-]{2,})(.*)?$/).label('Website'),
password: Joi.string().min(6).max(20).label('Password'),
};在该对象中，name，email，phone，website 和 password 分别为表单中五个表单项的名称。Joi.string() 表示验证该表单项的值是字符串类型。如果值不是字符串类型，则验证不通过。.required() 表示该表单项为必填项。如果该表单项为空，则验证不通过。.label('Name') 表示该表单项的标签名称为 Name。可以根据需要修改。
在增加自定义表单项时，需要添加到验证规则对象内，例如：
this.validatorTypes = {
...
foo: Joi.string().regex(/^[0-9a-f]{24}$/).label('Transaction ID'),
};提交
在 submit 事件中，需要判断表单是否验证通过。如果验证通过，则可以进行表单提交。如果验证不通过，则需要更新表单提示信息。示例代码如下：
-- -------------------- ---- -------
------------------- -
-----------------------
----- ---------- - ------- -- -
-- ------- -
---------------
----- --------------------- -- ------------------
---
- ---- -
-- ---- --
-
--
--------------------------------
-在该代码中，event.preventDefault() 阻止表单默认提交事件。this.props.validate(onValidate) 触发验证事件，该事件的回调函数 onValidate 将会在验证结束后调用。
在 onValidate 中，如果 error 参数不为空，则表单验证不通过。需要将错误提示保存到组件状态中。例如，setState 将错误提示信息保存到 tips 状态中。
如果 error 参数为空，则表单验证通过。可以执行表单提交操作。该操作根据需求自行编写。
渲染提示信息
在 render 函数中，需要渲染表单项的错误提示信息。这些信息保存在 validate 组件的 errors 对象中。可以使用 renderTips 函数渲染提示信息。示例代码如下：
renderTips(name) {
const error = this.props.errors[name];
if (!error) {
return null;
}
return <div className="error">{error.map(({message}) => <p>{message}</p>)}</div>;
}在该代码中，name 参数表示表单项的名称。this.props.errors[name] 表示该表单项的错误信息（如果存在）。如果该表单项存在错误信息，renderTips 函数将渲染错误提示信息。否则，不渲染任何内容。
示例代码
以下为一个完整的示例代码。其中包含了所有前面介绍的内容。
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- -------------------------
------ --- ---- --------------
----- ------ ------- --------------- -
------------------ -
-------------
---------- - -
----- ---
------ ---
------ ---
-------- ---
--------- ---
--
------------------- - -
----- --------------------------------------
------ -----------------------------------------------
------ ----------------------------------------------
-------- ---------------------------------------------------------------------------------------
--------- ----------------------------------------------
--
--------------------- - ---------------------------------
--------------- - ---------------------------
----------------- - -----------------------------
------------- - -------------------------
--------------- - ---------------------------
-
------------------- -
-----------------------
----- ---------- - ------- -- -
-- ------- -
---------------
----- --------------------- -- ------------------
---
- ---- -
------------- -------
-
--
--------------------------------
-
--------------- -
----- ---- - ------------------
----- ----- - -------------------
---------------
------- ------
---
-
----------------- -
----- ---- - ------------------
----- ----- - -------------------
--------------------------- -- -
-- ------- -
---------------
----- --------------------- -- ------------------
---
- ---- -- ------ -
---------------
----------------- -----
---
-
-- ----- -------
-
---------------- -
----- ----- - ------------------------
-- -------- -
------ -----
-
------ ---- ---------------------------------------- -- -------------------------
-
-------- -
------ -
-----
-----------------
----- -----------------------------
-----
------ -------------------- --------
------
-----------
-----------
-----------------------
------------------------
------------------------
--
-------------------------
------
-----
------ ---------------------- --------
------
------------
------------
------------------------
------------------------
------------------------
--
--------------------------
------
-----
------ ---------------------- --------
------
-----------
------------
------------------------
------------------------
------------------------
--
--------------------------
------
-----
------ -------------------------- --------
------
-----------
--------------
--------------------------
------------------------
------------------------
--
----------------------------
------
-----
------ ---------------------------- --------
------
---------------
---------------
---------------------------
------------------------
------------------------
--
-----------------------------
------
------- -----------------------------
-------
------
--
-
-
------ ------- -------------------总结
本文介绍了如何使用 react-validation-mixin 组件实现前端表单验证。该组件方便易用，支持多种验证规则，如必填、邮箱、电话、URL 等。同时，也支持自定义验证规则。本文示例代码详细易懂，可以帮助初学者快速掌握该组件的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/205151