All Projects → logaretm → Vee Validate

logaretm / Vee Validate

Licence: mit
✅ Form Validation for Vue.js

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vee Validate

Validator.js
String validation
Stars: ✭ 18,842 (+113.63%)
Mutual labels:  hacktoberfest, validation, validator, validate, validations
FilterInputJs
Tiny and Powerful Library for limit an entry (text box,input) as number,string or more...
Stars: ✭ 37 (-99.58%)
Mutual labels:  validator, validations, validate, validation-library
checker
Golang parameter validation, which can replace go-playground/validator, includes ncluding Cross Field, Map, Slice and Array diving, provides readable,flexible, configurable validation.
Stars: ✭ 62 (-99.3%)
Mutual labels:  validation, validator, validate
Valiktor
Valiktor is a type-safe, powerful and extensible fluent DSL to validate objects in Kotlin
Stars: ✭ 267 (-96.97%)
Mutual labels:  validation, validation-library, validations
Validate
A simple jQuery plugin to validate forms.
Stars: ✭ 298 (-96.62%)
Mutual labels:  validation, validator, validate
Password Validator
Validates password according to flexible and intuitive specification
Stars: ✭ 224 (-97.46%)
Mutual labels:  validation, validation-library, validate
vayder
Easy and concise validations for Express routes
Stars: ✭ 26 (-99.71%)
Mutual labels:  validator, validate, validation-library
thai-citizen-id-validator
🦉 Validate Thai Citizen ID with 0 dependencies 🇹🇭
Stars: ✭ 35 (-99.6%)
Mutual labels:  validation, validator, validation-library
Approvejs
A simple JavaScript validation library that doesn't interfere
Stars: ✭ 336 (-96.19%)
Mutual labels:  validation, validator, validations
Validate
⚔ Go package for data validation and filtering. support Map, Struct, Form data. Go通用的数据验证与过滤库,使用简单,内置大部分常用验证、过滤器,支持自定义验证器、自定义消息、字段翻译。
Stars: ✭ 378 (-95.71%)
Mutual labels:  validation, validator, validate
Validator.js
⁉️轻量级的 JavaScript 表单验证,字符串验证。没有依赖,支持 UMD ,~3kb。
Stars: ✭ 486 (-94.49%)
Mutual labels:  validation, validator, validate
Php Validate
Lightweight and feature-rich PHP validation and filtering library. Support scene grouping, pre-filtering, array checking, custom validators, custom messages. 轻量且功能丰富的PHP验证、过滤库。支持场景分组,前置过滤,数组检查,自定义验证器,自定义消息。
Stars: ✭ 225 (-97.45%)
Mutual labels:  validation, validation-library, validate
Express Validator
An express.js middleware for validator.js.
Stars: ✭ 5,236 (-40.63%)
Mutual labels:  hacktoberfest, validation, validator
python-valid8
Yet another validation lib ;). Provides tools for general-purpose variable validation, function inputs/outputs validation as well as class fields validation. All entry points raise consistent ValidationError including all contextual details, with dynamic inheritance of ValueError/TypeError as appropriate.
Stars: ✭ 24 (-99.73%)
Mutual labels:  validation, validator, validate
Validot
Validot is a performance-first, compact library for advanced model validation. Using a simple declarative fluent interface, it efficiently handles classes, structs, nested members, collections, nullables, plus any relation or combination of them. It also supports translations, custom logic extensions with tests, and DI containers.
Stars: ✭ 198 (-97.76%)
Mutual labels:  validation, validator, validation-library
Validator Docs
Validação de CPF, CNPJ, CNH, NIS, Título Eleitoral e Cartão Nacional de Saúde com Laravel.
Stars: ✭ 334 (-96.21%)
Mutual labels:  hacktoberfest, validation, validation-library
Vuelayers
Web map Vue components with the power of OpenLayers
Stars: ✭ 532 (-93.97%)
Mutual labels:  hacktoberfest, vuejs2, vue2
Nice Validator
Simple, smart and pleasant validation solution.
Stars: ✭ 587 (-93.34%)
Mutual labels:  validation, validator, validate
Vuelidation
simple, powerful, vuejs validation.
Stars: ✭ 38 (-99.57%)
Mutual labels:  validation, vuejs2
Vue Share Buttons
🔗A set of social buttons for Vue.js
Stars: ✭ 34 (-99.61%)
Mutual labels:  vuejs2, vue2

CodeCoverage CircleCI CDNJS npm downloads npm version Bundle size Average time to resolve an issue Percentage of issues still open


vee-validate is a form validation library for Vue.js that allows you to validate inputs and build better form UIs in a familiar declarative style or using composition functions.

Features

  • 🍞 Easy: Declarative validation that is familiar and easy to setup
  • 🧘‍♀️ Flexible: Synchronous, Asynchronous, field-level or form-level validation
  • ⚡️ Fast: Build faster forms faster with intuitive API and small footprint
  • 🏏 Minimal: Only handles the complicated form concerns, gives you full control over everything else
  • 😎 UI Agnostic: Works with native HTML elements or your favorite UI library components
  • 🦾 Progressive: Works whether you use Vue.js as a progressive enhancement or in a complex setup
  • Built-in Rules: Companion lib with 25+ Rules that covers most needs in most web applications
  • 🌐 i18n: 45+ locales for built-in rules contributed by developers from all over the world

Getting Started

Installation

# Install with yarn
yarn add vee-validate@next

# Install with npm
npm install vee-validate@next --save

Vue version support

The main v4 version supports Vue 3.x only, for previous versions of Vue, check the following the table

vue Version vee-validate version Documentation Link
2.x 2.x or 3.x v2 or v3
3.x 4.x v4

Usage

vee-validate offers two styles to integrate form validation into your Vue.js apps.

Declarative Components

Higher-order components are better suited for most of your cases. Register the Field and Form components and create a simple required validator:

import { Field, Form } from 'vee-validate';

export default {
  components: {
    Field,
    Form,
  },
  methods: {
    isRequired(value) {
      return value ? true : 'This field is required';
    },
  },
};

Then use the Form and Field components to render your form:

<Form v-slot="{ errors }">
  <Field name="field" :rules="isRequired" />

  <span>{{ errors.field }}</span>
</Form>

The Field component renders an input of type text by default but you can control that

Composition API

If you want more fine grained control, you can use useField function to compose validation logic into your component:

import { useField } from 'vee-validate';

export default {
  setup() {
    // Validator function
    const isRequired = value => (value ? true : 'This field is required');
    const { value, errorMessage } = useField('field', isRequired);

    return {
      value,
      errorMessage,
    };
  },
};

Then in your template, use v-model to bind the value to your input and display the errors using errorMessage:

<input name="field" v-model="value" />
<span>{{ errorMessage }}</span>

📚 Documentation

Read the documentation and demos.

Sponsorship

You can help this this project by donating one time or by sponsoring via the following link

Buy Me A Coffee

Contributing

You are welcome to contribute to this project, but before you do, please make sure you read the contribution guide.

Credits

Emeriti

Here we honor past contributors and sponsors who have been a major part on this project.

⚖️ License

Released under MIT by @logaretm.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].