https://github.com/kolirt/vue-validation-kit
🔮 A lightweight, Laravel-inspired validation package for Vue 3
https://github.com/kolirt/vue-validation-kit
form validation validator vue-form vue-form-builder vue-form-generator vue-validate vue-validate-easy vue-validation vue-validator
Last synced: about 1 month ago
JSON representation
🔮 A lightweight, Laravel-inspired validation package for Vue 3
- Host: GitHub
- URL: https://github.com/kolirt/vue-validation-kit
- Owner: kolirt
- License: mit
- Created: 2024-10-06T20:30:34.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2025-04-11T16:40:36.000Z (about 1 month ago)
- Last Synced: 2025-04-15T02:47:10.810Z (about 1 month ago)
- Topics: form, validation, validator, vue-form, vue-form-builder, vue-form-generator, vue-validate, vue-validate-easy, vue-validation, vue-validator
- Language: TypeScript
- Homepage: https://kolirt.github.io/vue-validation-kit/
- Size: 353 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Vue3 validation kit
A lightweight, Laravel-inspired validation package for Vue 3. Effortlessly validate complex, nested data structures with minimal code.
**Table of Contents**
- [Getting started](#getting-started)
- [Advantages of using this solution](#advantages-of-using-this-solution)
- [🔥 Key benefits](#-key-benefits)
- [🚀 Features](#-features)
- [Installation](#installation)
- [Setup](#setup)
- [Usage](#usage)
- [Validate field](#validate-field)
- [Validate object](#validate-object)
- [Rules](#rules)
- [Presence and requirement](#presence-and-requirement)
- [Value comparison](#value-comparison)
- [Size and range](#size-and-range)
- [Data types](#data-types)
- [Special formats](#special-formats)
- [List membership](#list-membership)
- [Acceptance state](#acceptance-state)
- [Demo](#demo)
- [Example](#example)
- [Faq](#faq)
- [License](#license)
- [Other packages](#other-packages)
# Getting started
## Advantages of using this solution
`vue-validation-kit` is a convenient and powerful package for data validation in Vue.js applications. It provides a simple and intuitive solution for form validation, inspired by the validation system of the Laravel framework, making it particularly user-friendly for developers familiar with this technology. The package allows seamless integration of validation into projects while keeping the code clean and structured.
### 🔥 Key benefits:
- **Ease of Use**
An intuitive syntax, similar to Laravel, enables quick setup of validation rules with minimal effort.
- **Flexibility**
Supports a wide range of built-in validation rules and offers the ability to create custom rules.
- **Efficiency**
Significantly reduces the amount of code required to implement validation, making projects easier to maintain.
- **Laravel-Inspired**
Developers working with Laravel will immediately recognize a familiar validation approach, simplifying the transition between frontend and backend.
### 🚀 Features:
One of the standout features of vue-validation-kit is its ability to validate deeply nested data structures without the need to write cumbersome code. The package makes it easy to handle complex objects and arrays, automatically applying validation rules to all levels of nesting. This is ideal for working with forms that contain multi-level data, such as objects with arrays or nested JSON structures.
With vue-validation-kit, you can focus on your application’s logic rather than tedious validation checks, while benefiting from a reliable and scalable tool for form handling in Vue.js.
## Installation
Use yarn or npm to install the package `@kolirt/vue-validation-kit`.
```bash
npm install --save @kolirt/vue-validation-kit
yarn add @kolirt/vue-validation-kit
```
## Setup
Add dependencies to your `main.ts`:
```javascript
import { createApp } from 'vue'
import { createValidation } from '@kolirt/vue-validation-kit'
import { en } from '@kolirt/vue-validation-kit/localization'
const app = createApp({ ... })
app.use(createValidation({
locale: 'en',
messages: { en }
}))
app.mount('#app')
```
# Usage
## Validate field
```vue
import { useForm, ValidationField, ValidationForm } from '@kolirt/vue-validation-kit'
import { required, min } from '@kolirt/vue-validation-kit/rules'
type Payload = {
email: string
}
const form = useForm<Payload>(
{
name: null,
},
{
name: [required(), min(3)]
}
)
function send() {
form.validate()
.then(() => {
console.log('Success validation')
})
.catch(() => {
console.log('Error validation')
})
}
{{ fieldName }}
{{ firstError }}
```
## Validate object
```vue
import { useForm, ValidationField, ValidationForm } from '@kolirt/vue-validation-kit'
import { required, min } from '@kolirt/vue-validation-kit/rules'
type Payload = {
city: {
name: string
lat: number
lon: number
}
}
const form = useForm<Payload>(
{
city: {
name: null,
population: null,
}
},
{
'city.name': [required(), min(3)],
'city.population': [required()]
}
)
function send() {
form.validate()
.then(() => {
console.log('Success validation')
})
.catch(() => {
console.log('Error validation')
})
}
{{ fieldName }}
{{ firstError }}
{{ fieldName }}
{{ firstError }}
```
# Rules
## Presence and requirement
### required
### requiredIf
### requiredIfAccepted
### requiredIfDeclined
## Value comparison
### confirmed
### same
### is
### greaterThan
### greaterThanOrEqual
### lessThan
### lessThanOrEqual
## Size and range
### between
### max
### min
## Data types
### boolean
### decimal
### integer
## Special formats
### email
### regex
### url
## List membership
### included
### notIncluded
## Acceptance state
### accepted
### declined
# Demo
[Demo here](https://kolirt.github.io/vue-validation-kit/)
# Example
[Example here](https://github.com/kolirt/vue-validation-kit/tree/master/examples)
# FAQ
Check closed [issues](https://github.com/kolirt/vue-validation-kit/issues) with `FAQ` label to get answers for most asked
questions.
# License
[MIT](./LICENSE)
# Other packages
Check out my other projects on my [GitHub profile](https://github.com/kolirt).