前言
在开发前端应用时,表单验证是一个常见且必备的功能。使用 npm 包可以方便我们在项目中引入表单验证,并减少重复造轮子的工作。本文将介绍 npm 包 @ontohub/react-form-validation 的使用方法,并且提供详细的示例代码。
安装
使用 npm 安装 @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