npm 包 react-livr-validation 使用教程

在前端开发中，表单是我们经常要处理的一个重要组件。而表单验证则是保证表单数据正确性的核心步骤之一。如果需要自己手写表单验证逻辑，可能会涉及很多复杂的代码和逻辑判断。而 React 生态圈中，有很多成熟的表单验证库可供使用。

本文将介绍一款简单易用的 npm 包 react-livr-validation，并提供详细的使用教程和示例代码。

简介

react-livr-validation 是基于 LIVR 标准的 React 表单验证库。LIVR 是一种类似于正则表达式的数据验证规则集合，它定义了一套规范和一组验证规则，可以让你在很短的时间内编写出高质量的数据验证逻辑。而 react-livr-validation 将这些验证规则与 React 组件结合，提供了非常方便的表单验证功能。

安装

使用 npm 进行安装：

npm install react-livr-validation

快速上手

假设我们有如下一个登录表单：

-- -------------------- ---- -------
------ ------ - -------- - ---- --------

-------- ----------- -
  ----- ---------- ------------ - -------------
  ----- ---------- ------------ - -------------

  ----- ------------ - --- -- -
    -------------------
    -- --------
  --

  ------ -
    ----- ------------------------
      -----
        ------ -------------------------------
        ------
          -----------
          -------------
          ----------------
          ------------- -- ----------------------------
        --
      ------
      -----
        ------ ------------------------------
        ------
          ---------------
          -------------
          ----------------
          ------------- -- ----------------------------
        --
      ------
      ------- -------------------------
    -------
  --
-

我们可以使用 react-livr-validation 来对该表单进行验证。首先，我们需要引入 Validator 组件和相关验证规则：

import { Validator } from 'react-livr-validation';

const rules = {
  username: ['required', 'not_empty'],
  password: ['required', 'not_empty'],
};

接着，我们将 Validator 组件包裹在表单组件的外层，并将验证规则作为 rules 属性传递给它：

-- -------------------- ---- -------
-------- ----------- -
  ----- ---------- ------------ - -------------
  ----- ---------- ------------ - -------------

  ----- ------------ - --- -- -
    -------------------
    -- --------
  --

  ------ -
    ---------- --------------
      ----- ------------------------
        -----
          ------ -------------------------------
          ------
            -----------
            -------------
            ----------------
            ------------- -- ----------------------------
          --
        ------
        -----
          ------ ------------------------------
          ------
            ---------------
            -------------
            ----------------
            ------------- -- ----------------------------
          --
        ------
        ------- -------------------------
      -------
    ------------
  --
-

最后，我们需要在 handleSubmit 回调函数中调用 Validator 组件的 validate 方法来检查表单数据是否合法。如果合法，执行表单提交逻辑；否则，提示用户输入错误信息：

-- -------------------- ---- -------
------ - ---------- -------- - ---- ------------------------

-------- ----------- -
  ----- ---------- ------------ - -------------
  ----- ---------- ------------ - -------------

  ----- ------------ - --- -- -
    -------------------

    ----- - ------- ------ - - ---------------------------------------

    -- ------------------ -
      ----------------------
      -------
    -

    -- --------
  --

  -- ---

  ------ -
    ---------- --------------
      ----- ------------------------
        --- ----- ------ ---
      -------
    ------------
  --
-

至此，我们已经成功地使用 react-livr-validation 进行了表单验证。

验证规则

在前文中，我们定义了 rules 对象来描述验证规则。验证规则是一个包含一组名称和参数的数组，其中：

• 名称是具体的验证规则，如 required、email、equal_to_field 等。
• 参数是与验证规则相关的配置项，如 min_length、max_length、field 等。

下面是 react-livr-validation 支持的验证规则列表：

not_empty

检查值是否为非空字符串。如果值为 null、undefined 或空字符串，则认为验证不通过。

const rules = {
  name: ['not_empty'],
};

required

检查值是否存在。如果值为 null、undefined 或空字符串，则认为验证不通过。

const rules = {
  name: ['required'],
};

email

检查值是否为电子邮件地址。如果不是，则认为验证不通过。

const rules = {
  email: ['email'],
};

equal_to_field

检查值是否与指定字段的值相同。如果不是，则认为验证不通过。

const rules = {
  password: ['equal_to_field:password_confirmation'],
};

one_of

检查值是否包含在指定的数组中。如果不包含，则认为验证不通过。

const rules = {
  role: ['one_of:admin,user'],
};

integer

检查值是否为整数。如果不是，则认为验证不通过。

const rules = {
  age: ['integer'],
};

positive_integer

检查值是否为正整数。如果不是，则认为验证不通过。

const rules = {
  age: ['positive_integer'],
};

float

检查值是否为浮点数。如果不是，则认为验证不通过。

const rules = {
  balance: ['float'],
};

positive_float

检查值是否为正浮点数。如果不是，则认为验证不通过。

const rules = {
  balance: ['positive_float'],
};

url

检查值是否为 URL。如果不是，则认为验证不通过。

const rules = {
  homepage: ['url'],
};

max_length

检查值的长度是否小于等于指定值。如果大于指定值，则认为验证不通过。

const rules = {
  introduction: ['max_length:1000'],
};

min_length

检查值的长度是否大于等于指定值。如果小于指定值，则认为验证不通过。

const rules = {
  password: ['min_length:6'],
};

更多配置

除了上述验证规则外，react-livr-validation 还支持以下高级配置：

defaultMessage

指定默认错误消息或消息模板。当某个字段验证失败时，会用该配置项的值替换错误消息模板中的占位符。默认为 'Invalid value'。

const rules = {
  email: ['email'],
};
const config = {
  defaultMessage: '请输入有效的电子邮件地址',
};

events

指定表单验证的触发事件列表。默认为 ['blur', 'change']。

const rules = {
  username: ['not_empty'],
};
const config = {
  events: ['blur'],
};

errorClass

指定错误提示信息的样式类名。默认为 'error-message'。

const rules = {
  username: ['not_empty'],
};
const config = {
  errorClass: 'error',
};

defaultFieldErrorMessage，defaultRuleErrorMessage

分别指定字段级别和规则级别的默认错误消息或消息模板。当某个字段或规则验证失败时，会用该配置项的值替换特定错误消息模板中的占位符。

const rules = {
  username: ['not_empty'],
};
const config = {
  defaultFieldErrorMessage: '{label}不能为空',
  defaultRuleErrorMessage: '{label}必须为电子邮件地址',
};

总结

react-livr-validation 是一款简单易用的 React 表单验证库，它基于 LIVR 标准，提供了一套规范和一组验证规则，帮助我们快速编写高质量的数据验证逻辑。使用它，我们可以轻松处理表单数据的验证，保证表单数据的正确性。在你开发 React 组件时，不妨试试这个库吧！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005607881e8991b448dea57