HouseForm 跨端实践一套 API 同时搞定 Web 与 React Native 表单校验【免费下载链接】houseformSimple to use React forms, where your validation and UI code live together in harmony.项目地址: https://gitcode.com/gh_mirrors/ho/houseform关键词React Native 表单校验、HouseForm React 表单库、跨端表单方案在移动端与 Web 端并行的业务开发中一份表单逻辑写两遍是不少团队的痛点Web 用一套 React 表单库React Native 又要另起炉灶校验规则、错误提示、表单状态全都重复维护。HouseForm正是为解决这个问题而生的 React 表单库它采用 headless无头设计让校验逻辑与 UI 代码同处一处并且天然支持 React Native无需任何额外定制。本文将带你用一套 API 快速搭建跨 Web 与 React Native 的表单校验方案。为什么 HouseForm 能轻松跨端HouseForm 的核心定位是 runtime agnostic运行时无关。它只负责表单的状态管理与校验逻辑不渲染任何 UI 元素——所有输入框、按钮、提示文案都由你自己编写。这种 Bring Your Own Markup自带标记的设计意味着浏览器里的input、React Native 里的TextInput都能接入同一套表单 API。Field-first 设计以字段为单位组织逻辑每个字段的校验与 UI 写在一起Zod 驱动校验开箱即用地复用 Zod 强大的 schema 校验能力零 UI 依赖没有 DOM 假设SSR、Web、React Native 通吃快速上手Web 端的一个典型登录表单先看 Web 端的基础写法。安装依赖Zod 是 peer dependencynpm install houseform zod核心代码非常简单Form负责整体状态Field负责单个字段import { Field, Form } from houseform; import { z } from zod; const App () ( Form onSubmit{(values) alert(JSON.stringify(values))} {({ isValid, submit }) ( form onSubmit{(e) { e.preventDefault(); submit(); }} Field nameemail onBlurValidate{z.string().email(请输入正确的邮箱)} {({ value, setValue, onBlur, errors }) ( div input value{value} onBlur{onBlur} onChange{(e) setValue(e.target.value)} / {errors.map((error) p key{error}{error}/p)} /div )} /Field button disabled{!isValid} typesubmit提交/button /form )} /Form );可以看到校验时机onBlurValidate、错误信息errors、提交状态isValid全部由 HouseForm 管理UI 完全由你掌控。同一套 API 迁移到 React Native切到 React Native 时组件结构、校验规则、状态逻辑一行都不用改只需把渲染层的input换成TextInput、div换成View。官方文档docs/guides/react-native.md中的示例说明了这一点import { Field, Form } from houseform; import { z } from zod; import { Alert, Button, Text, TextInput, View } from react-native; export default function App() { return ( Form onSubmit{(values) { Alert.alert(表单提交 JSON.stringify(values)); }} {({ isValid, submit }) ( View Field nameemail onBlurValidate{z.string().email(请输入正确的邮箱)} {({ value, setValue, onBlur, errors }) ( View TextInput value{value} onBlur{onBlur} onChangeText{(text) setValue(text)} placeholder{邮箱} / {errors.map((error) ( Text key{error}{error}/Text ))} /View )} /Field Button disabled{!isValid} title提交 onPress{submit} / /View )} /Form ); }对比两段代码可以发现业务逻辑与校验代码 100% 复用差异仅在 UI 标签层。这正是 HouseForm 跨端方案的含金量所在。三种校验时机覆盖跨端交互差异移动端与 Web 端的交互习惯不同手机上用户更习惯失焦后再提示Web 上边输入边校验体验更佳。HouseForm 为每个字段提供了三种独立的校验时机可在不同端自由组合校验时机属性名适用场景输入时onChangeValidate实时反馈适合密码强度、用户名查重失焦时onBlurValidate移动端友好避免频繁打断输入提交时onSubmitValidate兜底校验如最终服务端规则官方实现中这三种校验通过统一的状态管理在 lib/form/form.tsx 内协调字段级校验逻辑集中在 lib/field/field.tsx你可以在源码中深入阅读。自定义校验跨端业务规则的两种写法真实业务中往往不止格式校验还要查重二次确认等自定义规则。HouseForm 支持两种自定义校验方式详见 docs/guides/custom-validators.md1. 纯函数异步校验不依赖 Zod 也能用Field nameemail onChangeValidate{async (val) { if (val.length 3) throw 邮箱至少 3 个字符; return true; // 校验通过 }} 2. 在 Zod 中用refine组合自定义规则并联动其他字段Field listenTo{[password]} nameconfirmPassword onChangeValidate{async (val, form) { if (form.getFieldValue(password)?.value ! val) { throw 两次密码不一致; } return true; }} 第二种写法通过listenTo监听其他字段变化并借助form.getFieldValue读取跨字段数据——这一能力在移动端确认密码这类高频场景中非常实用且Web 与 React Native 行为完全一致。TypeScript 加持跨端表单类型安全HouseForm 本身由 TypeScript 编写类型安全是强项见 docs/guides/typescript.md。为字段与表单显式声明类型后value、errors、onSubmit的values都能获得严格推导interface LoginForm { email: string; password: string; } FormLoginForm onSubmit{(values) { // values 已自动推导为 LoginForm }} FieldLoginForm[email] nameemail ... / /Form由于 API 与 DOM 解耦同一份类型定义在 Web 与 React Native 中通用跨端开发时无需维护两套类型进一步降低出错概率。跨端表单实践的总结建议对比项传统方案HouseForm 方案表单逻辑复用Web/RN 各写一套一套逻辑两端复用校验规则维护两份规则易漂移单一 Zod schema 或函数UI 自由度受限于库自带组件headless完全自绘学习成本两套 API只学一套快速上手建议先 clone 仓库阅读官方示例与文档git clone https://gitcode.com/gh_mirrors/ho/houseform重点关注 docs/guides/basic-usage.md基础用法与 docs/guides/react-native.md跨端指南若需了解数组字段等进阶能力可查阅 docs/reference/array.md 与 docs/reference/field.md。HouseForm 用headless 字段优先的设计把 Web 与 React Native 的表单校验收敛到同一套 API 上。如果你正在为跨端表单的重复代码烦恼不妨把它加入技术选型清单用最少的成本换取最大的复用收益。【免费下载链接】houseformSimple to use React forms, where your validation and UI code live together in harmony.项目地址: https://gitcode.com/gh_mirrors/ho/houseform创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考