Formisch 为 Vue 服务
Formisch是一个以图案为主,为Vue的无头形式库. 它管理形态状态和验证. 它的型号安全,默认速度快,而由于其模块化设计,它的捆绑尺寸也很小. 试试看 游乐场来啊!
福尔米施也可供 角质, (中文(简体) ), 霍诺克, (中文(简体) ), 预录, (中文(简体) ), 齐克, (中文(简体) ), 反应, (中文(简体) ), 原生反应, (中文(简体) ), 固态JS 财务报告和审定财务报表 丝绒。 。 。 .
要点
- 从2.5 kB开始的小捆绑大小
- 与 Valibot 基于 Schema 的验证
- 编辑器中自动补全的安全性
- 开放源码和全面测试,覆盖率为100%
- - DOM更新精细
- 最小、可读和深思熟虑的API
- 支持所有本地 HTML 窗体字段
示例
每个表格都从 useForm 可调和. 它根据所提供的 Valibot 计划 初始化了你的表型商店 并推断出它的类型 接下来,将表格包装在 <Form /> 组件。 土生土长的薄层 <form /> 处理构成验证和提交要素。 然后,你可以访问一个田的状态与 useField 可堆叠或 <Field /> 要连接您输入的组件.
<script setup lang="ts">
import { Field, Form, useForm } from '@formisch/vue';
import * as v from 'valibot';
const LoginSchema = v.object({
email: v.pipe(v.string(), v.email()),
password: v.pipe(v.string(), v.minLength(8)),
});
const loginForm = useForm({ schema: LoginSchema });
</script>
<template>
<Form :of="loginForm" @submit="(output, event) => console.log(output)">
<Field :of="loginForm" :path="['email']" v-slot="field">
<div>
<input v-model="field.input" v-bind="field.props" type="email" />
<div v-if="field.errors">{{ field.errors[0] }}</div>
</div>
</Field>
<Field :of="loginForm" :path="['password']" v-slot="field">
<div>
<input v-model="field.input" v-bind="field.props" type="password" />
<div v-if="field.errors">{{ field.errors[0] }}</div>
</div>
</Field>
<button type="submit">Login</button>
</Form>
</template>
此外,Formisch还提供了几种功能(我们称之为"方法"),可用于读取和操纵形式状态. 其中包括: focus, (中文(简体) ), getDeepErrorEntries, (中文(简体) ), getDeepErrors, (中文(简体) ), getDirtyInput, (中文(简体) ), getDirtyPaths, (中文(简体) ), getErrors, (中文(简体) ), getInput, (中文(简体) ), handleSubmit, (中文(简体) ), insert, (中文(简体) ), isDirty, (中文(简体) ), isEdited, (中文(简体) ), isTouched, (中文(简体) ), isValid, (中文(简体) ), move, (中文(简体) ), pickDirty, (中文(简体) ), remove, (中文(简体) ), replace, (中文(简体) ), reset, (中文(简体) ), setErrors, (中文(简体) ), setInput, (中文(简体) ), submit, (中文(简体) ), swap 财务报告和审定财务报表 validate。这些方法允许您在程序上控制表格.
比较
使得福米斯奇独有的是其框架-不可知性核心,它与你所使用的框架完全本土. 它通过在核心软件包构建时插入框架特定的反应块来工作,为任何UI更新赋予你本土性能. 模块化方法 API 仅通过包含您导入的方法来保持从 ~2.5 kB 开始的捆绑,端到端类型安全覆盖了深层嵌入路径和字段阵列,其TypeScript 推论即使在形式增长时也保持了快.
关于Formisch如何与VeeValidate、FormKit和TanStack Form相提并论,请参看 比较指南。 。 。 .
愿景
我对Formisch的愿景是建立一个框架不可知的平台,类似于 维特但是对于形式来说——一个共享的核心,让同样的精神模型和代码基础在本土工作,跨越每一个现代UI框架.
合作伙伴
感谢我们的伙伴们支持发展! 加入他们 并促进开源软件的可持续性!
反馈
找到一个错误或有一个想法 如何改进库? 请填写一个 问题我们一起可以让表格变得更好!
许可证
这个项目是免费提供的,并获得许可证 麻省理工学院许可证。 。 。 .