引言
在前端开发中，表单验证是必不可少的一环，但是单独编写表单验证逻辑代码会令代码变得臃肿难以维护，因此使用 npm 包 react-validate-new 可以很好地解决这个问题。
本文将详细介绍如何使用 react-validate-new 包完成表单验证功能，并提供示例代码和指导意义。
安装
在项目的根目录下打开终端，运行以下命令：
--- ------- ------------------
安装完成后，即可在组件中引入和使用 react-validate-new。
基本使用
- 在组件中引入 react-validate-new：
------ --------- ---- ---------------------
- 在渲染表单的 JSX 中，给需要验证的表单元素加上以下属性：
------ --------------- -------------- --------- ---- -- ------------------- --------- -------- -- --
其中，validation 表示验证规则对象，validationErrors 表示出错提示信息对象，这两个对象可以设置的选项如下：
required: 是否必填，值为true或者falsematchRegexp: 匹配正则表达式，值为一个正则表达式isEmail: 是否是邮箱格式，值为true或者falseisNumeric: 是否是数字格式，值为true或者false
- 在表单提交事件中调用 react-validate-new 提供的方法进行表单验证：
------------------- -
-----------------------
----- - --------- -------- - - -----------
---------------------------- --------- -------- --
------------- -- -
-- --------- -
-- -----------
-
---
-其中，validateAll() 方法的参数是一个对象，这个对象内部的 key 值需要与表单元素的名称相同。
如果验证成功，validateAll() 方法会返回一个 Promise 对象，Promise 的值为 true。如果验证失败，会返回一个 Promise 对象，Promise 的值为 false。可以根据这个结果对提交事件进行处理。
高级使用
除了上述基本方法以外，react-validate-new 还提供了以下高级用法：
- 表单元素的错误提示位置
默认情况下，表单元素的错误提示信息是在元素下方以文本的方式呈现的。如果需要改变错误提示信息的位置，可以在 Validator 组件中传入 errorClass 属性来控制错误提示的样式，从而实现自由定位。
例如：
---------- --------------- ------------ ----------------- ------------- -
上述代码中，errorClass 属性值为 alert alert-danger，表示将错误信息渲染为一个 alert 框。
- 表单元素的自定义错误提示信息
如果需要显示自定义的错误提示信息，可以在表单元素的 validationErrors 属性中设置自定义的错误信息。
例如：
------ --------------- -------------- --------- ---- -- ------------------- --------- --------- ------------ --------- -- --
上述代码中，当用户名为空时，错误提示信息为 '请输入用户名'；当用户名不符合匹配正则表达式时，错误提示信息为 '用户名格式错误'。
- 手动触发表单验证
在需要手动触发表单验证的情况下，可以调用 validate 方法来进行表单验证。方法参数为表单元素的名称。
例如：
------------------- -
-----------------------
----- - --------- -------- - - -----------
-----------------------------------
------------- -- -
-- --------- -
-- -----------
-
---
-上述代码中，调用了 validate('username') 方法并传入了表单元素的名称，表示只对用户名这个表单元素进行验证。
总结
通过本文的介绍，我们学习了如何使用 npm 包 react-validate-new 完成表单验证，并实现了基本用法和高级用法。
在实际开发中，表单验证是必不可少的一环，灵活使用 react-validate-new 可以让我们的代码更加健壮和易于维护，有助于提高我们的开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562e181e8991b448e0656