Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More β†’
Socket
Sign inDemoInstall
Socket

vee-validate

Package Overview
Dependencies
Maintainers
0
Versions
342
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vee-validate

Painless forms for Vue.js

  • 4.14.6
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created

What is vee-validate?

vee-validate is a form validation library for Vue.js that allows you to validate inputs and forms with ease. It provides a set of validation rules and the ability to create custom rules, making it highly flexible and customizable.

What are vee-validate's main functionalities?

Basic Validation

This example demonstrates basic validation using vee-validate. The input field for email is validated to ensure it is required and follows the email format. Errors are displayed using the `errors.first` method.


{
  "template": "<form @submit.prevent=\"submitForm\"><input v-model=\"email\" name=\"email\" v-validate=\"'required|email'\" /><span>{{ errors.first('email') }}</span><button type=\"submit\">Submit</button></form>",
  "data": "function() { return { email: '' }; }",
  "methods": "{ submitForm() { this.$validator.validateAll().then((result) => { if (result) { alert('Form Submitted!'); } }); } }"
}

Custom Validation Rules

This example shows how to create and use custom validation rules in vee-validate. The custom rule 'unique' checks if the username is not 'admin' and displays an error message if it is.


{
  "template": "<form @submit.prevent=\"submitForm\"><input v-model=\"username\" name=\"username\" v-validate=\"'required|unique'\" /><span>{{ errors.first('username') }}</span><button type=\"submit\">Submit</button></form>",
  "data": "function() { return { username: '' }; }",
  "methods": "{ submitForm() { this.$validator.validateAll().then((result) => { if (result) { alert('Form Submitted!'); } }); } }",
  "created": "function() { this.$validator.extend('unique', { getMessage: field => `The ${field} is already taken.`, validate: value => new Promise(resolve => { setTimeout(() => { resolve({ valid: value !== 'admin' }); }, 500); }) }); }"
}

Validation with Async Rules

This example demonstrates how to use asynchronous validation rules in vee-validate. The custom rule 'is-available' checks if the email is not 'test@example.com' with a simulated delay.


{
  "template": "<form @submit.prevent=\"submitForm\"><input v-model=\"email\" name=\"email\" v-validate=\"'required|email|is-available'\" /><span>{{ errors.first('email') }}</span><button type=\"submit\">Submit</button></form>",
  "data": "function() { return { email: '' }; }",
  "methods": "{ submitForm() { this.$validator.validateAll().then((result) => { if (result) { alert('Form Submitted!'); } }); } }",
  "created": "function() { this.$validator.extend('is-available', { getMessage: field => `The ${field} is not available.`, validate: value => new Promise(resolve => { setTimeout(() => { resolve({ valid: value !== 'test@example.com' }); }, 1000); }) }); }"
}

Other packages similar to vee-validate

Keywords

FAQs

Package last updated on 26 Oct 2024

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚑️ by Socket Inc