{"id":17685038,"url":"https://github.com/frandiox/vue-tiny-validator","last_synced_at":"2025-05-05T20:10:27.398Z","repository":{"id":143926848,"uuid":"334465288","full_name":"frandiox/vue-tiny-validator","owner":"frandiox","description":"Tiny form validation tool for Vue 3","archived":false,"fork":false,"pushed_at":"2021-03-24T14:22:19.000Z","size":104,"stargazers_count":51,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-25T03:54:16.352Z","etag":null,"topics":["typescript","validation","vue"],"latest_commit_sha":null,"homepage":"","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/frandiox.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"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}},"created_at":"2021-01-30T16:59:20.000Z","updated_at":"2024-03-27T12:19:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"aa7d297e-1147-493e-a3e2-63ef012b1913","html_url":"https://github.com/frandiox/vue-tiny-validator","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frandiox%2Fvue-tiny-validator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frandiox%2Fvue-tiny-validator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frandiox%2Fvue-tiny-validator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frandiox%2Fvue-tiny-validator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/frandiox","download_url":"https://codeload.github.com/frandiox/vue-tiny-validator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222675047,"owners_count":17021191,"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":["typescript","validation","vue"],"created_at":"2024-10-24T10:26:17.803Z","updated_at":"2024-11-02T05:02:12.064Z","avatar_url":"https://github.com/frandiox.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"200\" src=\"./logo.png\"\u003e\n\u003c/p\u003e\n\n# Vue Tiny Validator\n\n[![size](https://badgen.net/bundlephobia/minzip/vue-tiny-validator)](https://bundlephobia.com/result?p=vue-tiny-validator)\n[![coverage](https://coveralls.io/repos/github/frandiox/vue-tiny-validator/badge.svg?branch=master)](https://coveralls.io/github/frandiox/vue-tiny-validator?branch=master)\n\nTiny validation library (\u003c0.7K gzipped) without dependencies for Vue 3 that serves as building blocks. Inspired by `vee-validate` and `vuetify`'s validation.\n\n- Non-intrusive in the way you build or style form components. It simply hooks the `modelValue` and gives you the error message to display.\n- Reset validation errors for a specific field or for the whole form.\n- Build your own rules as simple functions that return `true` or error message. You control everything, including i18n.\n- Supports asynchronous rules (e.g. checking if a field value already exists in DB).\n- Fully typed.\n\n## Installation\n\n```sh\nnpm i vue-tiny-validator\n# or\nyarn add vue-tiny-validator\n```\n\n## Usage\n\nParent component (form):\n\n```js\nimport { defineComponent, ref } from 'vue'\nimport { useForm } from 'vue-tiny-validator'\n\nexport default defineComponent({\n  setup() {\n    const myValue = ref('')\n    const { validate, errors } = useForm()\n\n    const submit = () =\u003e {\n      if (validate()) {\n        // Validated, submit form\n        // ...\n        return\n      }\n\n      console.warn('Form errors!', errors.value)\n    }\n\n    return { myValue, submit }\n  },\n})\n```\n\n```html\n\u003cform @submit.prevent=\"submit\"\u003e\n  \u003cMyInput v-model=\"myValue\" /\u003e\n  \u003cbutton\u003eSubmit\u003c/button\u003e\n\u003c/form\u003e\n```\n\nChild component (input):\n\n```js\nimport { defineComponent, watch } from 'vue'\nimport { useField } from 'vue-tiny-validator'\n\nexport default defineComponent({\n  name: 'MyInput',\n  props: {\n    modelValue: {\n      type: String,\n      default: '',\n    },\n  },\n  setup(props) {\n    // Rules return `true` on success or a string with an error message on failure.\n    const isRequired = (v) =\u003e !!v || 'Required!'\n\n    const { validate, error } = useField({\n      value: () =\u003e props.modelValue,\n      rules: [isRequired],\n    })\n\n    // Optionally validate it every time the model changes.\n    // This could be debounced, or used in @blur event instead.\n    watch(() =\u003e props.modelValue, validate)\n\n    return { error }\n  },\n})\n```\n\n```html\n\u003clabel\u003e\n  \u003cinput\n    :value=\"modelValue\"\n    @input=\"$emit('update:modelValue', $event.target.value)\"\n  /\u003e\n  \u003cspan\u003e{{ error }}\u003c/span\u003e\n\u003c/label\u003e\n```\n\nSee the [example](./example) for more options.\n\n## Rules\n\nRules are simple functions that return `true` on success or an error message on failure. Examples:\n\n```js\nconst isRequired = (v) =\u003e !!v || 'Required'\nconst minLength = (v) =\u003e v?.length \u003e= 3 || 'Min length 3'\nconst positiveNumber = (v) =\u003e v \u003e= 1 || 'Only positive numbers'\nconst pattern = (v) =\u003e /^[a-z0-9_#]+$/i.test(v) || t('form.invalidPattern') // using vue-i18n\n```\n\n### Async rules\n\nRules can also be asynchronous:\n\n```js\nconst isUnique = async (v) =\u003e {\n  const response = await fetch(`/api/is-unique/${v}`)\n  // Assuming API returns non-200 code when not unique\n  return response.ok || 'Already in use'\n}\n```\n\nIn this case, you'll need to use `validateAsync` instead of `validate`:\n\n```js\nconst { validateAsync } = useForm()\n\nconst submit = async () =\u003e {\n  if (await validateAsync()) {\n    // valid, submit\n  }\n\n  // invalid\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrandiox%2Fvue-tiny-validator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrandiox%2Fvue-tiny-validator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrandiox%2Fvue-tiny-validator/lists"}