0.0.9 • Published 2 years ago
vue3-form-validator v0.0.9
vue3-form-validator
Form Validator with Smart Input Component for vue3 and nuxt3!
- Installation:
- yarn add vue3-form-validator
- npm install vue3-form-validator
Use on vue3:
In main.ts add:
import { createApp } from "vue"; import App from "./App.vue"; const app = createApp(App) import { Form, Input } from 'vue3-form-validator'; app.component('Form', Form) app.component('Input', Input)
Use on Nuxt3 globally:
In plugins directory add formValidator.ts:
import { defineNuxtPlugin } from "#app"; import { Form, Input } from 'vue3-form-validator'; export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.component("Form", Form); nuxtApp.vueApp.component("Input", Input); });
- How to use default validators:
Locally import a validators:
On Input component:import { Validators } from 'vue3-form-validator' or import { Validators_ptBR as Validator } from 'vue3-form-validator'
<Input id="inputEmail" :v-model="formEditData.email" @update:value="formEditData.email = $event" type="email" label="Email:" :rules="[validators.required, validators.email]" />
How to use a custom validators:
- Compose a local custom validators:
On Input component:password(el: HTMLInputElement) { const regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[$*&@#])[0-9a-zA-Z$*&@#]{8,}$/; if (el.value !== "" && !regex.test(el.value)) return "[your error message]."; return true; }
<Input id="inputPassword" :v-model="formEditData.passord" @update:value="formEditData.password = $event" type="password" label="Password:" :rules="[password]" />
- Compose a local custom validators:
- Preparing a mask directive for new versions...