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.
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$ };
}
};
```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 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 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.
Simple, lightweight model-based validation for Vue.js
Vue 3 support is almost here with the Vuelidate 2 rewrite. Check out the next branch to see the latest progress.
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)
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/
# 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.
Damian Dulisz |
Natalia Tepluhina |
Dobromir Hristov |
Marina Mosti |
Here we honor past contributors who have been a major part on this project.
FAQs
Simple, lightweight model-based validation for Vue.js
We found that vuelidate demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.