JSPM

simple-vue3-validator

1.0.0-beta.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 173
  • Score
    100M100P100Q84236F
  • License MIT

lightweight yet flexible validation lib for vue.js - fork of simple-vue-validator

Package Exports

  • simple-vue3-validator

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (simple-vue3-validator) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Simple Vue 3 Validator

Simple Vue 3 validator is a lightweight yet flexible plugin for Vue.js 3.0 that allows you to validate input fields, and display errors. It watches changes of your model data, validates them, and informs you with the validation result.

It supports the following features:

  • Fully customized validation rules.
  • Cross field validation.
  • Async/ajax validation (with supports of loading indicator, result caching, debounced user input).
  • Validating custom component.
  • Dynamic form / multiple validation instances.

Documentation

COMING SOON ⌚

Installation

Package is installable via npm.

npm install --save simple-vue3-validator

You can also install it via bower.

bower install --save simple-vue3-validator

NOTE

  • Bower installation is untested as of 2021/05/30
  • For bower package, please use /dist/plugin.js

Configuration

import { createApp } from 'vue'
import App from './App.vue'
import SimpleVueValidator from 'simple-vue3-validator'

const app = createApp(App)
  .use(SimpleVueValidator)

Basic Usage

Define the validators object in your vue / component instance:

validators: {
      email (value) {
        return Validator.value(value).required().email();
      }
    }

In the template HTML use the validation object injected by the library to display validation status / results.

<div class="message">{{ validation.firstError('email') }}</div>

NOTE

Full documentation coming soon ⌚

license MIT