npm 包 react-validate-new 使用教程

引言

在前端开发中，表单验证是必不可少的一环，但是单独编写表单验证逻辑代码会令代码变得臃肿难以维护，因此使用 npm 包 react-validate-new 可以很好地解决这个问题。

本文将详细介绍如何使用 react-validate-new 包完成表单验证功能，并提供示例代码和指导意义。

安装

在项目的根目录下打开终端，运行以下命令：

npm install react-validate-new

安装完成后，即可在组件中引入和使用 react-validate-new。

基本使用

1. 在组件中引入 react-validate-new：

import Validator from 'react-validate-new';

1. 在渲染表单的 JSX 中，给需要验证的表单元素加上以下属性：

<Input
  name='username'
  validations={{ required: true }}
  validationErrors={{ required: '请输入用户名' }}
/>

其中，validation 表示验证规则对象，validationErrors 表示出错提示信息对象，这两个对象可以设置的选项如下：

• required: 是否必填，值为 true 或者 false

• matchRegexp: 匹配正则表达式，值为一个正则表达式

• isEmail: 是否是邮箱格式，值为 true 或者 false

• isNumeric: 是否是数字格式，值为 true 或者 false

1. 在表单提交事件中调用 react-validate-new 提供的方法进行表单验证：

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

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

其中，validateAll() 方法的参数是一个对象，这个对象内部的 key 值需要与表单元素的名称相同。

如果验证成功，validateAll() 方法会返回一个 Promise 对象，Promise 的值为 true。如果验证失败，会返回一个 Promise 对象，Promise 的值为 false。可以根据这个结果对提交事件进行处理。

高级使用

除了上述基本方法以外，react-validate-new 还提供了以下高级用法：

1. 表单元素的错误提示位置

默认情况下，表单元素的错误提示信息是在元素下方以文本的方式呈现的。如果需要改变错误提示信息的位置，可以在 Validator 组件中传入 errorClass 属性来控制错误提示的样式，从而实现自由定位。

例如：

<Validator 
  ref='validator' 
  class='form' 
  errorClass='alert alert-danger' 
>

上述代码中，errorClass 属性值为 alert alert-danger，表示将错误信息渲染为一个 alert 框。

1. 表单元素的自定义错误提示信息

如果需要显示自定义的错误提示信息，可以在表单元素的 validationErrors 属性中设置自定义的错误信息。

例如：

<Input
  name='username'
  validations={{ required: true }}
  validationErrors={{ required: '请输入用户名', matchRegexp: '用户名格式错误' }}
/>

上述代码中，当用户名为空时，错误提示信息为 '请输入用户名'；当用户名不符合匹配正则表达式时，错误提示信息为 '用户名格式错误'。

1. 手动触发表单验证

在需要手动触发表单验证的情况下，可以调用 validate 方法来进行表单验证。方法参数为表单元素的名称。

例如：

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

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

上述代码中，调用了 validate('username') 方法并传入了表单元素的名称，表示只对用户名这个表单元素进行验证。

总结

通过本文的介绍，我们学习了如何使用 npm 包 react-validate-new 完成表单验证，并实现了基本用法和高级用法。

在实际开发中，表单验证是必不可少的一环，灵活使用 react-validate-new 可以让我们的代码更加健壮和易于维护，有助于提高我们的开发效率。

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