Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/frandiox/vue-tiny-validator
Tiny form validation tool for Vue 3
https://github.com/frandiox/vue-tiny-validator
typescript validation vue
Last synced: 16 days ago
JSON representation
Tiny form validation tool for Vue 3
- Host: GitHub
- URL: https://github.com/frandiox/vue-tiny-validator
- Owner: frandiox
- License: mit
- Created: 2021-01-30T16:59:20.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-03-24T14:22:19.000Z (over 3 years ago)
- Last Synced: 2024-10-25T03:54:16.352Z (24 days ago)
- Topics: typescript, validation, vue
- Language: TypeScript
- Homepage:
- Size: 102 KB
- Stars: 51
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Tiny Validator
[](https://bundlephobia.com/result?p=vue-tiny-validator)
[](https://coveralls.io/github/frandiox/vue-tiny-validator?branch=master)
Tiny validation library (<0.7K gzipped) without dependencies for Vue 3 that serves as building blocks. Inspired by `vee-validate` and `vuetify`'s validation.
- Non-intrusive in the way you build or style form components. It simply hooks the `modelValue` and gives you the error message to display.
- Reset validation errors for a specific field or for the whole form.
- Build your own rules as simple functions that return `true` or error message. You control everything, including i18n.
- Supports asynchronous rules (e.g. checking if a field value already exists in DB).
- Fully typed.
## Installation
```sh
npm i vue-tiny-validator
# or
yarn add vue-tiny-validator
```
## Usage
Parent component (form):
```js
import { defineComponent, ref } from 'vue'
import { useForm } from 'vue-tiny-validator'
export default defineComponent({
setup() {
const myValue = ref('')
const { validate, errors } = useForm()
const submit = () => {
if (validate()) {
// Validated, submit form
// ...
return
}
console.warn('Form errors!', errors.value)
}
return { myValue, submit }
},
})
```
```html
Submit
```
Child component (input):
```js
import { defineComponent, watch } from 'vue'
import { useField } from 'vue-tiny-validator'
export default defineComponent({
name: 'MyInput',
props: {
modelValue: {
type: String,
default: '',
},
},
setup(props) {
// Rules return `true` on success or a string with an error message on failure.
const isRequired = (v) => !!v || 'Required!'
const { validate, error } = useField({
value: () => props.modelValue,
rules: [isRequired],
})
// Optionally validate it every time the model changes.
// This could be debounced, or used in @blur event instead.
watch(() => props.modelValue, validate)
return { error }
},
})
```
```html
{{ error }}
```
See the [example](./example) for more options.
## Rules
Rules are simple functions that return `true` on success or an error message on failure. Examples:
```js
const isRequired = (v) => !!v || 'Required'
const minLength = (v) => v?.length >= 3 || 'Min length 3'
const positiveNumber = (v) => v >= 1 || 'Only positive numbers'
const pattern = (v) => /^[a-z0-9_#]+$/i.test(v) || t('form.invalidPattern') // using vue-i18n
```
### Async rules
Rules can also be asynchronous:
```js
const isUnique = async (v) => {
const response = await fetch(`/api/is-unique/${v}`)
// Assuming API returns non-200 code when not unique
return response.ok || 'Already in use'
}
```
In this case, you'll need to use `validateAsync` instead of `validate`:
```js
const { validateAsync } = useForm()
const submit = async () => {
if (await validateAsync()) {
// valid, submit
}
// invalid
}
```