尤雨溪都点赞的表单校验解决方案,到底多么强
如果你是 Vue 开发者,那么 Vorms 绝对是你不能错过的表单验证利器。本文将带你快速了解 Vorms 的基本功能、特点和如何简单使用它提升你的开发体验。
软件简介
Vorms 是一个基于 Vue 3 组合式 API 的表单验证库。它轻量、灵活,并且专为追求极简开发体验的前端开发者设计。想象一下,仅需几行代码,就能搞定表单验证,还支持多种流行的验证器,绝对让你在表单开发上如虎添翼。
而且,Vorms 的代码量也非常轻巧——压缩后只有 12kb!如果你还在为表单验证头疼,这个库就是为你量身定制的。
软件特点
Vorms 不仅易用,还带来了几个让开发者心动的特点:
-
• 强类型支持:它是用 TypeScript 编写的,支持 TSDoc,帮助你在开发过程中获得智能提示和错误校验。
-
• 轻量化设计:压缩后仅 12kb,并支持 Tree-shaking,完全不用担心体积问题。
-
• 无缝体验:基于 Vue 3 的组合式 API,提供了流畅的开发体验,和 Vue 其他特性搭配简直完美。
-
• 灵活验证器:支持 Yup、Zod 和 Valibot 等多种验证器,还可以自定义验证规则。
安装和使用
Vorms 安装非常简单,支持 npm 安装,也可以通过 CDN 快速引入。以下是一个简单的示例,看看 Vorms 是如何优雅地处理表单的:
npm install @vorms/core
import { useForm } from '@vorms/core';const sugarOptions = ['no', 'light', 'half', 'standard'];
const { register, handleSubmit, handleReset } = useForm({initialValues: {drink: '',sugar: 'light',},onSubmit(data) {console.log(data);},
});const { value: drink, attrs: drinkFieldAttrs } = register('drink');
const { value: sugar, attrs: sugarFieldAttrs } = register('sugar');
你只需要在模板里这样写:
<form @submit="handleSubmit" @reset="handleReset"><label>Drink</label><input v-model="drink" type="text" v-bind="drinkFieldAttrs"><label>Sugar level</label><select v-model="sugar" v-bind="sugarFieldAttrs"><option v-for="item in sugarOptions" :key="item" :value="item">{{ item }}</option></select><button type="reset">Reset</button><button type="submit">Submit</button>
</form>
轻松搞定表单验证,不论是简单的选择题还是复杂的验证逻辑,Vorms 都能完美胜任。
常见使用场景
你可以使用 Vorms 处理各种场景下的表单,比如:
-
• 登录表单:快速验证用户名和密码。
-
• 动态字段表单:处理动态增加的输入框,比如新增或删除项目。
-
• 多步表单:处理表单步骤,支持跨字段验证。
灵感来源
Vorms 的灵感来自于多个优秀的开源项目,例如:
-
• Formik:一个用于 React 的表单库,功能强大。
-
• React Hook Form:简化 React 表单的开发过程。
-
• VeeValidate:为 Vue 开发者提供强大的表单验证功能。
Vorms 在借鉴这些项目的基础上,结合 Vue 3 的组合式 API,给开发者带来了更加优雅和灵活的表单处理方式。
总结
如果你是 Vue 开发者,并且正在寻找一个简单易用的表单验证库,Vorms 绝对是你的不二选择。它轻量、灵活,并且功能强大,能够处理各种复杂的表单验证需求。
如果觉得 Vorms 对你有帮助,赶紧点个赞吧!👏
推荐阅读
-
• Gin-vue-admin:全栈开发神器
-
• LG-SOAR:翱翔吧,开发者的利器
欢迎关注我的公众号“前端新视野brizer”,原创技术文,开源好工具第一时间推送。