HouseForm 字段联动技巧listenTo 如何实现密码确认等跨字段校验【免费下载链接】houseformSimple to use React forms, where your validation and UI code live together in harmony.项目地址: https://gitcode.com/gh_mirrors/ho/houseformHouseForm 是一款将校验逻辑与 UI 代码同住一屋的 React 表单库而字段联动跨字段校验正是它最实用的高级能力之一。本篇文章将围绕 HouseForm 的listenTo属性手把手教你实现密码确认、条件字段等跨字段校验场景帮你彻底告别两个字段各校各的的尴尬局面。HouseForm 主打Simple to use React forms, where your validation and UI code live together in harmony.——校验逻辑直接写在 UI 组件旁边一个Field组件即可完成取值、渲染、校验。但当表单中两个字段相互依赖时例如密码与确认密码事情就没那么简单了。接下来我们就用listenTo轻松化解。为什么表单字段需要联动大多数表单校验是各自为政的用户名只校验用户名邮箱只校验邮箱。但真实业务中常有跨字段依赖密码与确认密码必须一致选择公司用户时才需要填写公司名称结束日期不得早于开始日期。如果不做字段联动用户先填完确认密码再回头修改密码表单里仍残留两次密码不一致的错误提示——体验很差。这就是HouseForm 跨字段校验要解决的问题。listenTo 一行代码实现字段监听HouseForm 的解决方案非常直接在Field组件上添加listenTo属性传入一个字段名数组当被监听的字段触发变更或失焦时监听方会同步重新执行对应校验。相关类型定义位于 lib/field/types.tsField nameconfirmpassword listenTo{[password]} onChangeValidate{(val, form) { if (val form.getFieldValue(password)!.value) { return Promise.resolve(true); } else { return Promise.reject(Passwords must match); } }} {/* ... */} /Field其中form.getFieldValue(password)用于在某个字段的校验函数里读取其他字段的值这正是跨字段校验的数据来源。官方对该用法的完整讲解见 linked-fields.md。实战用 listenTo 实现密码确认校验下面是一个完整的密码确认表单两步走即可搞定第一步密码字段做基础长度校验第二步确认密码字段通过listenTo{[password]}监听密码字段并在onChangeValidate中比对两个值import { Form, Field } from houseform; import { z } from zod; const App () ( Form onSubmit{(values) alert(JSON.stringify(values))} {({ submit, isValid }) ( Field namepassword onChangeValidate{z.string().min(8, 至少8个字符)} {({ value, setValue, onBlur, errors }) ( div input typepassword placeholder密码 value{value} onBlur{onBlur} onChange{(e) setValue(e.target.value)} / {errors.map((error) p key{error}{error}/p)} /div )} /Field Field nameconfirmpassword listenTo{[password]} onChangeValidate{(val, form) { if (val form.getFieldValue(password)!.value) { return Promise.resolve(true); } return Promise.reject(两次输入的密码不一致); }} {({ value, setValue, onBlur, errors, isTouched }) ( div input typepassword placeholder确认密码 value{value} onBlur{onBlur} onChange{(e) setValue(e.target.value)} / {isTouched errors.map((error) p key{error}{error}/p)} /div )} /Field button disabled{!isValid} onClick{submit}提交/button / )} /Form ); 关键点加了listenTo后只要用户修改密码字段HouseForm 就会自动重新校验确认密码字段错误提示实时刷新不再残留过期错误。listenTo 背后的工作原理listenTo的实现并不神秘核心逻辑在 lib/field/use-field-like.ts 的useListenToListenToArray函数中监听方把自己注册到被监听字段的onChangeListenerRefs、onBlurListenerRefs、onMountListenerRefs三组回调列表里当被监听字段调用setValue时通过setTimeout触发对应回调见 use-field-like.ts驱动监听方重新执行校验组件卸载时会自动清理监听器避免内存泄漏。简单说listenTo 订阅他人事件 重跑自己的校验优雅且零侵入。更多联动场景监听多个字段与条件字段listenTo支持数组一次监听多个字段比如日期区间校验Field nameendDate listenTo{[startDate]} /* ... */ /另一个常见的字段联动场景是条件显隐根据一个字段的值决定是否渲染另一个字段。你可以利用Form的value属性实现例如邮箱为 Gmail 时隐藏密码字段完整示例同样见 linked-fields.md 的 Conditional Fields 章节。使用 listenTo 的注意事项listenTo传的是字符串数组即使只监听一个字段也要写成[password]形式监听字段触发onBlur时监听方会执行自己的onBlurValidate触发onChange时执行onChangeValidate两类校验可分开配置想了解listenTo的完整 API 说明可查阅 field.md 参考文档其中对listenTo的语义有精确定义。总结HouseForm 的listenTo用一行属性就解决了表单字段联动难题无论是密码确认这类跨字段校验还是复杂的条件表单都不需要引入额外的状态管理或手工触发校验。如果你想在自己的 React 项目中亲自体验也可以直接git clone https://gitcode.com/gh_mirrors/ho/houseform查看源码与测试用例如 field.spec.tsx 中的监听场景。学会它你的表单体验将立刻上一个台阶【免费下载链接】houseformSimple to use React forms, where your validation and UI code live together in harmony.项目地址: https://gitcode.com/gh_mirrors/ho/houseform创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考