vuelidate

What is vuelidate?

Vuelidate is a simple, lightweight model-based validation library for Vue.js. It allows you to define validation rules for your Vue components and provides a reactive way to handle form validation.

What are vuelidate's main functionalities?

Basic Validation

This code demonstrates basic validation using Vuelidate. It validates that the 'name' field is required and the 'password' field is required and must be at least 6 characters long.

```javascript
import { required, minLength } from '@vuelidate/validators';
import useVuelidate from '@vuelidate/core';

export default {
  data() {
    return {
      form: {
        name: '',
        password: ''
      }
    };
  },
  validations() {
    return {
      form: {
        name: { required },
        password: { required, minLength: minLength(6) }
      }
    };
  },
  setup() {
    const v$ = useVuelidate();
    return { v$ };
  }
};
```

Custom Validators

This code demonstrates how to create and use a custom validator in Vuelidate. The custom validator checks if the 'email' field contains a valid email address.

```javascript
import { helpers } from '@vuelidate/validators';
import useVuelidate from '@vuelidate/core';

const customValidator = helpers.withMessage('Must be a valid email', value => /.+@.+\..+/.test(value));

export default {
  data() {
    return {
      form: {
        email: ''
      }
    };
  },
  validations() {
    return {
      form: {
        email: { customValidator }
      }
    };
  },
  setup() {
    const v$ = useVuelidate();
    return { v$ };
  }
};
```

Async Validation

This code demonstrates how to use asynchronous validation in Vuelidate. The async validator checks if the 'username' field is valid by making an API call.

```javascript
import { required } from '@vuelidate/validators';
import useVuelidate from '@vuelidate/core';

const asyncValidator = helpers.withAsync(async value => {
  const response = await fetch(`https://api.example.com/validate?value=${value}`);
  const result = await response.json();
  return result.isValid;
});

export default {
  data() {
    return {
      form: {
        username: ''
      }
    };
  },
  validations() {
    return {
      form: {
        username: { required, asyncValidator }
      }
    };
  },
  setup() {
    const v$ = useVuelidate();
    return { v$ };
  }
};
```

Other packages similar to vuelidate

vee-validate

VeeValidate is another popular validation library for Vue.js. It provides a comprehensive set of validation rules and allows for both template-based and programmatic validation. Compared to Vuelidate, VeeValidate offers more built-in rules and better integration with form components.

vue-formulate

Vue Formulate is a powerful form library for Vue.js that includes validation as one of its features. It focuses on simplifying form creation and validation with a declarative syntax. Compared to Vuelidate, Vue Formulate provides a more integrated solution for form handling and validation.

vuelidate-error-extractor

Vuelidate Error Extractor is a companion library for Vuelidate that helps in extracting and displaying validation errors. It provides a set of components and utilities to work with Vuelidate's validation results. While it is not a standalone validation library, it enhances the functionality of Vuelidate by making error handling easier.

README

vuelidate

Simple, lightweight model-based validation for Vue.js

Sponsors

Gold

Silver

Bronze

Features & characteristics:

• Model based
• Decoupled from templates
• Dependency free, minimalistic library
• Support for collection validations
• Support for nested models
• Contextified validators
• Easy to use with custom validators (e.g. Moment.js)
• Support for function composition
• Validates different data sources: Vuex getters, computed values, etc.

Demo & docs

https://vuelidate.js.org/

Vue 3 support

Vue 3 support is almost here with the Vuelidate 2 rewrite. Check out the next branch to see the latest progress.

Installation

npm install vuelidate --save

You can import the library and use as a Vue plugin to enable the functionality globally on all components containing validation configuration.

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

Alternatively it is possible to import a mixin directly to components in which it will be used.

import { validationMixin } from 'vuelidate'

var Component = Vue.extend({
  mixins: [validationMixin],
  validations: { ... }
})

The browser-ready bundle is also provided in the package.

<script src="vuelidate/dist/vuelidate.min.js"></script>
<!-- The builtin validators is added by adding the following line. -->
<script src="vuelidate/dist/validators.min.js"></script>

Vue.use(window.vuelidate.default)

Basic usage

For each value you want to validate, you have to create a key inside validations options. You can specify when input becomes dirty by using appropriate event on your input box.

import { required, minLength, between } from 'vuelidate/lib/validators'

export default {
  data () {
    return {
      name: '',
      age: 0
    }
  },
  validations: {
    name: {
      required,
      minLength: minLength(4)
    },
    age: {
      between: between(20, 30)
    }
  }
}

This will result in a validation object:

$v: {
  name: {
    "required": false,
    "minLength": false,
    "$invalid": true,
    "$dirty": false,
    "$error": false,
    "$pending": false
  },
  age: {
    "between": false
    "$invalid": true,
    "$dirty": false,
    "$error": false,
    "$pending": false
  }
}

Checkout the docs for more examples: https://vuelidate.js.org/

Contributing

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# create UMD bundle.
npm run build

# Create docs inside /gh-pages ready to be published
npm run docs

# run unit tests
npm run unit

# run all tests
npm test

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

Contributors

Current

Damian Dulisz

Natalia Tepluhina

Dobromir Hristov

Marina Mosti

Emeriti

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

• Monterail
• Paweł Grabarz

License

MIT