# vue3-form-validator

> Form validator for vue3

Latest version **0.0.9** (published 2022-05-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue3-form-validator
pnpm add vue3-form-validator
yarn add vue3-form-validator
bun add vue3-form-validator
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.9 |
| Published | 2022-05-29 |
| First published | 2022-05-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 21.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Selton Jeffeson |
| Maintainers | seltonjeff |
| Keywords | vue, vue3, form, vue form, vue3 form, form validation, form validator, vue form validation, vue form validator, vue3 form validation, vue3 form validator, vue input, vue input validator, vue input validation, nuxt, nuxt3, nuxt 3, nuxt3 form, nuxt 3 form, nuxt3 form validation, nuxt 3 form validation, nuxt3 form validator, nuxt 3 form validator |

## Links

- npm: https://www.npmjs.com/package/vue3-form-validator
- Repository: https://github.com/SeltonJeff/vue3-form-validator
- Homepage: https://github.com/SeltonJeff/vue3-form-validator#readme
- Issues: https://github.com/SeltonJeff/vue3-form-validator/issues
- npm.io page: https://npm.io/package/vue3-form-validator

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.2.36

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.9 (latest) — 2022-05-29
- 0.0.8 — 2022-05-29
- 0.0.7 — 2022-05-29
- 0.0.6 — 2022-05-29
- 0.0.5 — 2022-05-29
- 0.0.4 — 2022-05-29
- 0.0.3 — 2022-05-29
- 0.0.2 — 2022-05-29
- 0.0.1 — 2022-05-29

## README

# 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:
         ```ts
          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:
         ```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:
    ```ts
    import { Validators } from 'vue3-form-validator'
    or
    import { Validators_ptBR as Validator } from 'vue3-form-validator'
    ```
    On Input component:
    ```vue
    <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:
      ```ts
      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;
      }
      ```
    On Input component:
      ```vue
      <Input
         id="inputPassword"
         :v-model="formEditData.passord"
         @update:value="formEditData.password = $event"
         type="password"
         label="Password:"
         :rules="[password]"
      />
      ```
  
##

* Preparing a mask directive for new versions...

---
_Source: https://npm.io/package/vue3-form-validator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._