{"id":13441831,"url":"https://github.com/logaretm/vee-validate","last_synced_at":"2025-05-12T18:39:33.270Z","repository":{"id":37677826,"uuid":"64519183","full_name":"logaretm/vee-validate","owner":"logaretm","description":"✅  Painless Vue forms","archived":false,"fork":false,"pushed_at":"2025-04-22T13:30:08.000Z","size":23298,"stargazers_count":11011,"open_issues_count":106,"forks_count":1288,"subscribers_count":112,"default_branch":"main","last_synced_at":"2025-05-02T00:02:16.632Z","etag":null,"topics":["form","form-validation","forms","hacktoberfest","validate","validation","validation-library","validations","validator","vee-validate","vue","vue2","vue3","vue3-composition-api","vuejs"],"latest_commit_sha":null,"homepage":"https://vee-validate.logaretm.com/v4","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/logaretm.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"logaretm","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2016-07-30T01:10:44.000Z","updated_at":"2025-04-30T08:37:30.000Z","dependencies_parsed_at":"2022-07-14T08:08:51.341Z","dependency_job_id":"1d5302fd-508d-438f-a6a4-24aa5fe3ecb2","html_url":"https://github.com/logaretm/vee-validate","commit_stats":{"total_commits":4432,"total_committers":393,"mean_commits":11.27735368956743,"dds":0.3402527075812274,"last_synced_commit":"f290933462db3e3499e158eef136bb30e5bc3942"},"previous_names":["baianat/vee-validate"],"tags_count":372,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logaretm%2Fvee-validate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logaretm%2Fvee-validate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logaretm%2Fvee-validate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logaretm%2Fvee-validate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/logaretm","download_url":"https://codeload.github.com/logaretm/vee-validate/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252317000,"owners_count":21728521,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form","form-validation","forms","hacktoberfest","validate","validation","validation-library","validations","validator","vee-validate","vue","vue2","vue3","vue3-composition-api","vuejs"],"created_at":"2024-07-31T03:01:38.577Z","updated_at":"2025-05-05T15:46:36.144Z","avatar_url":"https://github.com/logaretm.png","language":"TypeScript","funding_links":["https://github.com/sponsors/logaretm"],"categories":["HarmonyOS","TypeScript","Vue","Packages","Libraries \u0026 Plugins","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","前端开发框架及项目","UI实用程序","Components \u0026 Libraries","Projects","vuejs","UI Utilities","Awesome Vue.js","UI Utilities [🔝](#readme)"],"sub_categories":["Windows Manager","UI Utilities","Validation","Libraries \u0026 Plugins","其他_文本生成、文本对话","形成","Web and Publishing","Form"],"readme":"\u003cp align=\"center\"\u003e\r\n  \u003ca href=\"https://vee-validate.logaretm.com\" target=\"_blank\"\u003e\r\n    \u003cimg src=\"https://raw.githubusercontent.com/logaretm/vee-validate/main/logo.png\" width=\"200\" title=\"Go to website\"\u003e\r\n  \u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\nPainless Vue forms\r\n\u003c/p\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n\r\n\u003ca target=\"_blank\" href=\"https://www.npmjs.com/package/vee-validate\"\u003e\r\n  \u003cimg src=\"https://img.shields.io/npm/v/vee-validate.svg?label=\u0026color=05bda8\"\u003e\r\n\u003c/a\u003e\r\n\r\n\u003ca target=\"_blank\" href=\"https://npm-stat.com/charts.html?package=vee-validate\"\u003e\r\n  \u003cimg src=\"https://img.shields.io/npm/dm/vee-validate.svg?color=05bd6d\u0026label=\"\u003e\r\n\u003c/a\u003e\r\n\r\n\u003ca href=\"https://vee-validate.logaretm.com/v4/\" target=\"_blank\"\u003e\r\n  \u003cimg src=\"https://img.shields.io/badge/-docs%20and%20demos-009f53\"\u003e\r\n\u003c/a\u003e\r\n\r\n\u003ca href=\"https://github.com/sponsors/logaretm\"\u003e\r\n  \u003cimg src=\"https://img.shields.io/badge/-%E2%99%A5%20Sponsors-ec5cc6\"\u003e\r\n\r\n\u003c/a\u003e\r\n\r\n\u003c/p\u003e\r\n\r\n\u003cbr\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003ca href=\"https://github.com/sponsors/logaretm\"\u003e\r\n    \u003cimg src='https://sponsors.logaretm.com/sponsors.svg'\u003e\r\n  \u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n\u003cbr\u003e\r\n\r\n## Features\r\n\r\n- **🍞 Easy:** Declarative validation that is familiar and easy to setup\r\n- **🧘‍♀️ Flexible:** Synchronous, Asynchronous, field-level or form-level validation\r\n- **⚡️ Fast:** Build faster forms faster with intuitive API and small footprint\r\n- **🏏 Minimal:** Only handles the complicated form concerns, gives you full control over everything else\r\n- **😎 UI Agnostic:** Works with native HTML elements or your favorite UI library components\r\n- **🦾 Progressive:** Works whether you use Vue.js as a progressive enhancement or in a complex setup\r\n- **✅ Built-in Rules:** Companion lib with 25+ Rules that covers most needs in most web applications\r\n- **🌐 i18n:** 45+ locales for built-in rules contributed by developers from all over the world\r\n\r\n## Getting Started\r\n\r\n### Installation\r\n\r\n```sh\r\n# Install with yarn\r\nyarn add vee-validate\r\n\r\n# Install with npm\r\nnpm install vee-validate --save\r\n```\r\n\r\n### Vue version support\r\n\r\nThe main v4 version supports Vue 3.x only, for previous versions of Vue, check the following the table\r\n\r\n| vue Version | vee-validate version | Documentation Link                                                                       |\r\n| ----------- | -------------------- | ---------------------------------------------------------------------------------------- |\r\n| `2.x`       | `2.x` or `3.x`       | [v2](https://vee-validate.logaretm.com/v2) or [v3](https://vee-validate.logaretm.com/v3) |\r\n| `3.x`       | `4.x`                | [v4](https://vee-validate.logaretm.com/v4)                                               |\r\n\r\n### Usage\r\n\r\nvee-validate offers two styles to integrate form validation into your Vue.js apps.\r\n\r\n#### Composition API\r\n\r\nThe fastest way to create a form and manage its validation, behavior, and values is with the composition API.\r\n\r\nCreate your form with `useForm` and then use `defineField` to create your field model and props/attributes and `handleSubmit` to use the values and send them to an API.\r\n\r\n```vue\r\n\u003cscript setup\u003e\r\nimport { useForm } from 'vee-validate';\r\n\r\n// Validation, or use `yup` or `zod`\r\nfunction required(value) {\r\n  return value ? true : 'This field is required';\r\n}\r\n\r\n// Create the form\r\nconst { defineField, handleSubmit, errors } = useForm({\r\n  validationSchema: {\r\n    field: required,\r\n  },\r\n});\r\n\r\n// Define fields\r\nconst [field, fieldProps] = defineField('field');\r\n\r\n// Submit handler\r\nconst onSubmit = handleSubmit(values =\u003e {\r\n  // Submit to API\r\n  console.log(values);\r\n});\r\n\u003c/script\u003e\r\n\r\n\u003ctemplate\u003e\r\n  \u003cform @submit=\"onSubmit\"\u003e\r\n    \u003cinput v-model=\"field\" v-bind=\"fieldProps\" /\u003e\r\n    \u003cspan\u003e{{ errors.field }}\u003c/span\u003e\r\n\r\n    \u003cbutton\u003eSubmit\u003c/button\u003e\r\n  \u003c/form\u003e\r\n\u003c/template\u003e\r\n```\r\n\r\nYou can do so much more than this, for more info [check the composition API documentation](https://vee-validate.logaretm.com/v4/guide/composition-api/getting-started/).\r\n\r\n#### Declarative Components\r\n\r\nHigher-order components can also be used to build forms. Register the `Field` and `Form` components and create a simple `required` validator:\r\n\r\n```vue\r\n\u003cscript setup\u003e\r\nimport { Field, Form } from 'vee-validate';\r\n\r\n// Validation, or use `yup` or `zod`\r\nfunction required(value) {\r\n  return value ? true : 'This field is required';\r\n}\r\n\r\n// Submit handler\r\nfunction onSubmit(values) {\r\n  // Submit to API\r\n  console.log(values);\r\n}\r\n\u003c/script\u003e\r\n\r\n\u003ctemplate\u003e\r\n  \u003cForm v-slot=\"{ errors }\" @submit=\"onSubmit\"\u003e\r\n    \u003cField name=\"field\" :rules=\"required\" /\u003e\r\n\r\n    \u003cspan\u003e{{ errors.field }}\u003c/span\u003e\r\n\r\n    \u003cbutton\u003eSubmit\u003c/button\u003e\r\n  \u003c/Form\u003e\r\n\u003c/template\u003e\r\n```\r\n\r\nThe `Field` component renders an `input` of type `text` by default but you can [control that](https://vee-validate.logaretm.com/v4/api/field#rendering-fields)\r\n\r\n## 📚 Documentation\r\n\r\nRead the [documentation and demos](https://vee-validate.logaretm.com/v4).\r\n\r\n## Contributing\r\n\r\nYou are welcome to contribute to this project, but before you do, please make sure you read the [contribution guide](/CONTRIBUTING.md).\r\n\r\n## Credits\r\n\r\n- Inspired by Laravel's [validation syntax](https://laravel.com/docs/5.4/validation)\r\n- v4 API Inspired by [Formik's](https://github.com/formium/formik)\r\n- Nested path types by [react-hook-form](https://github.com/react-hook-form/react-hook-form)\r\n- Logo by [Baianat](https://github.com/baianat)\r\n\r\n## Emeriti\r\n\r\nHere we honor past contributors and sponsors who have been a major part on this project.\r\n\r\n- [Baianat](https://github.com/baianat).\r\n\r\n## ⚖️ License\r\n\r\nReleased under [MIT](/LICENSE) by [@logaretm](https://github.com/logaretm).\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogaretm%2Fvee-validate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flogaretm%2Fvee-validate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogaretm%2Fvee-validate/lists"}