前言
在开发前端应用时，表单验证是一个常见且必备的功能。使用 npm 包可以方便我们在项目中引入表单验证，并减少重复造轮子的工作。本文将介绍 npm 包 @ontohub/react-form-validation 的使用方法，并且提供详细的示例代码。
安装
使用 npm 安装 @ontohub/react-form-validation：
npm install @ontohub/react-form-validation
使用方法
基本用法
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------- -------- - ---- --------------------------------- -------- ------------ - ----- ------ -------- - --------- -------------- - ------ --- --------- --- ---------------- --- -- --------- ------ -- - -------------------- -- --- ----- ----- - ----------------- ----- - ------------ ------------ --------- --- ----- -------- - -------------------- ----- - ------------ ------------ --------------- --- ----- --------------- - --------------------------- ----- - ------------ ------------ ------------------------- --- ------ - ----- ----------------------------- ----- --------------------- ------ ------------ --------------------- -- ------------------- -- ---------------- -- ------------------------------ ------ ----- ------------------------ ------ --------------- ------------------------ -- ---------------------- -- ------------------- -- --------------------------------- ------ ----- -------------- ----------------- ------ --------------- ------------------------------- -- ----------------------------- -- -------------------------- -- ---------------------------------------- ------ ------- ----------------------------- ------- -- -展开代码
在上例中，我们使用了 @ontohub/react-form-validation 提供的 useForm 和 useField hook。useForm 返回一个包含表单状态和处理表单提交的 handleSubmit 的对象。useState 用于声明表单初始值，onSubmit 属性则指定表单提交后的处理逻辑。
useField 接受三个参数：表单字段名、表单状态和配置项。其中，配置项可选，用于指定表单字段的校验规则。
常用校验规则
@ontohub/react-form-validation 内置了一些常用的校验规则，我们可以在 useField 的配置项中使用这些规则：
- required: 必填项
- email: 邮箱格式
- minLength:N: 最小长度 (N 是最小长度)
- confirmation:fieldName: 确认项，fieldName 是确认的字段名
我们也可以自定义校验规则。下面是一个自定义校验规则的示例：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------- -------- - ---- --------------------------------- -------- ------------ - ----- ------ -------- - --------- -------------- - --------- --- -- --------- ------ -- - -------------------- -- --- ----- -------------- - ------- ---------- -- - -- ------------------- --- -------- - ------ --------- ------- --------- - - ----- -------- - -------------------- ----- - ------------ ------------ ---------------- --- ------ - ----- ----------------------------- ----- ------------------------ ------ ----------- ------------------------ -- ---------------------- -- ------------------- -- --------------------------------- ------ ------- ----------------------------- ------- -- -展开代码
在上例中，我们定义了一个名为 verifyUsername 的校验方法，并将其传递给 useField 方法。如果校验失败，verifyUsername 应该返回一个字符串。在调用 useField 时，传递 validations 属性，其中包含 verifyUsername 方法。
校验异步数据
异步数据校验是一种常见需求，@ontohub/react-form-validation 支持使用 async 标记的自定义方法进行异步数据校验。在这个示例中，我们需要进行一个异步校验，以验证电子邮件是否已经被注册：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------- -------- - ---- --------------------------------- -------- ------------ - ----- ------ -------- - --------- -------------- - ------ --- -- --------- ------ -- - -------------------- -- --- ----- ------------- - ----- ----- -- - ----- -------- - ----- ----------------------------------------------------- ----- ---- - ----- ---------------- ------ ------------- - --------- - ------ -- ------- -------- - ----- ----- - ----------------- ----- - ------------ ------------ -------- --------------- --- ------ - ----- ----------------------------- ----- --------------------- ------ ------------ --------------------- -- ------------------- -- ---------------- -- ------------------------------ ------ ------- ----------------------------- ------- -- -展开代码
在上例中，我们定义了一个 async 标记的方法 isEmailUnique，该方法需要返回 undefined 或者错误信息作为结果。在调用 useField 方法时，我们将 isEmailUnique 方法传递给 validations 属性，@ontohub/react-form-validation 就会自动生成一个正在验证的状态，并在异步操作结束后更新表单字段的验证状态。
验证组件
如果需要对表单中的多个字段进行校验，或者需要对表单中的多个组件进行联合校验，我们可以使用 @ontohub/react-form-validation 提供的 ValidatedForm 组件。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------- --------- ------------- - ---- --------------------------------- -------- ------------- - ----- ------ -------- - --------- -------------- - ------ --- --------- --- ---------------- --- -- --------- ------ -- - -------------------- -- --- ----- ----- - ----------------- ----- - ------------ ------------ --------- --- ----- -------- - -------------------- ----- - ------------ ------------ --------------- --- ----- --------------- - --------------------------- ----- - ------------ ------------ ------------------------- --- ------ - -------------- ------------ ----- --------------------- ------ ------------ --------------------- -- ------------------- -- ---------------- -- ------------------------------ ------ ----- ------------------------ ------ --------------- ------------------------ -- ---------------------- -- ------------------- -- --------------------------------- ------ ----- -------------- ----------------- ------ --------------- ------------------------------- -- ----------------------------- -- -------------------------- -- ---------------------------------------- ------ ------- ----------------------------- ---------------- -- -展开代码
在上例中，我们使用了 ValidatedForm 组件进行表单验证。组件接受一个 form 属性，该属性应该包含表单状态和 handleSubmit 方法。在使用 ValidatedForm 组件时，被包含的表单字段应该使用 useField 并将 form 传递给它。
总结
@ontohub/react-form-validation 提供了方便的表单验证功能，可以大大减少开发工作量，并在一定程度上保证了开发应用的质量。本文介绍了 @ontohub/react-form-validation 的基本用法和常用功能，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cbf81e8991b448da55a
