Vue Composition API for validating form.

Last update: Jun 27, 2022

vue-use-form(WIP)

Documentation( ๐Ÿ”จ WIP...)

ไธญๆ–‡ๆ–‡ๆกฃ( ๐Ÿ”จ ๆ–ฝๅทฅไธญ...)

Why hasn't it been updated these days?

I'm sorry I haven't updated these days, because my school has some heavy tasks, I really can't spare myself to continue to do it. However, I promise to continue to improve this library during the summer vacation. I love the usage of react-hook-form, and I will transplant the convenience it brings to Vue.

2022/06/08

๐ŸŽ‰ Thanks logaretm for giving us the name of lib

Install

# npm
npm i vue-use-form

# pnpm
pnpm i vue-use-form

# yarn
yarn add vue-use-form

๐Ÿš€ Features

  • ๐Ÿฆพ Type Strong: Written in TypeScript
  • ๐Ÿ† No Component: No need to import any components to use, you can use it in all UI framework
  • ๐Ÿ˜ Easy to use: Just 3 main hooks: useForm, useFormState, useFieldArray

TODO

  • ๐Ÿต Main features
    • ๐Ÿ‰ useForm
    • ๐ŸŠ useFormState
    • ๐Ÿ‹ useFieldArray
    • ๐Ÿฅ directive: v-form
    • ๐ŸŽ schema
      • ๐Ÿต class-validator
      • ๐Ÿถ Yup
      • ๐Ÿท Zod
      • ๐Ÿธ Vest
  • Security
    • ๐Ÿฏ Unit test
  • ๐Ÿผ Community(WIP...)
    • ๐ŸŽ‹ ไธญๆ–‡ๆ–‡ๆกฃ
    • ๐Ÿ“– Documentation
  • ๐ŸฆŠ Compatible UI framework(A way to get input/select/textarea dom)
    • ๐Ÿค element-plus
    • ๐Ÿ— ant-design-vue
    • ๐Ÿฅฉ vuetify
    • ๐Ÿฅ“ quasar
    • ๐ŸŒฎ provide a function to let the user to get the dom
    • ๐ŸŽจ other UI framework...

๐ŸŽ Try it online

๐ŸŽฎ play with element-plus by default way.

๐ŸŽฎ play with class-validator by using class-validator resolver

๐Ÿšฃ playground

you can fork/download this repo, and then just 3 steps can make playground run

# 1. open this repo folder in your local
# 2. init dependencies
pnpm i
# 3. open the playground folder and run `dev` script or
pnpm run dev

Quick Start

import { useForm } from 'vue-use-form' interface Inputs { username: string password: string age: number } const { formState, register, createSubmitHandler, createErrorHandler, reset, handleSubmit, setError, clearErrors, setValue, setFocus, getValues, triggerValidate, getFieldState, unregister, } = useForm({ mode: 'onChange', shouldFocusError: true, }) const [usernameField, usernameRef] = register('username', { required: 'Username is required!', minLength: { value: 3, message: 'Username must be at least 3 characters' }, maxLength: { value: 10, message: 'Username must be at most 10 characters' }, validate: (value) => { if (value === 'admin') { return 'Username is reserved!' } }, }) const [passwordField, passwordRef] = register('password', { required: 'Password is required!', minLength: { value: 8, message: 'Password must be at least 8 characters' }, maxLength: { value: 20, message: 'Password must be at most 20 characters' }, validate: { isContainLowercase: (value) => { if (!/[a-z]/.test(value)) { return 'Password must contain at least one lowercase letter' } }, isContainUppercase: (value) => { if (!/[A-Z]/.test(value)) { return 'Password must contain at least one uppercase letter' } }, }, }) const [ageField, ageRef] = register('age', { required: 'Age is required!', min: { value: 18, message: 'Age must be at least 18' }, max: { value: 10000, message: '?' }, valueAsNumber: true, }) const onSubmit = createSubmitHandler((data) => { console.log('validate success', data) }) const onError = createErrorHandler((errors) => { console.log('validate error', errors) }) ">
<script setup lang="ts">
import { useForm } from 'vue-use-form'

interface Inputs {
  username: string
  password: string
  age: number
}

const {
  formState,
  register,
  createSubmitHandler,
  createErrorHandler,
  reset,
  handleSubmit,
  setError,
  clearErrors,
  setValue,
  setFocus,
  getValues,
  triggerValidate,
  getFieldState,
  unregister,
} = useForm<Inputs>({
  mode: 'onChange',
  shouldFocusError: true,
})

const [usernameField, usernameRef] = register('username', {
  required: 'Username is required!',
  minLength: { value: 3, message: 'Username must be at least 3 characters' },
  maxLength: { value: 10, message: 'Username must be at most 10 characters' },
  validate: (value) => {
    if (value === 'admin') {
      return 'Username is reserved!'
    }
  },
})

const [passwordField, passwordRef] = register('password', {
  required: 'Password is required!',
  minLength: { value: 8, message: 'Password must be at least 8 characters' },
  maxLength: { value: 20, message: 'Password must be at most 20 characters' },
  validate: {
    isContainLowercase: (value) => {
      if (!/[a-z]/.test(value)) {
        return 'Password must contain at least one lowercase letter'
      }
    },
    isContainUppercase: (value) => {
      if (!/[A-Z]/.test(value)) {
        return 'Password must contain at least one uppercase letter'
      }
    },
  },
})

const [ageField, ageRef] = register('age', {
  required: 'Age is required!',
  min: { value: 18, message: 'Age must be at least 18' },
  max: { value: 10000, message: '?' },
  valueAsNumber: true,
})

const onSubmit = createSubmitHandler((data) => {
  console.log('validate success', data)
})

const onError = createErrorHandler((errors) => {
  console.log('validate error', errors)
})
script>

<template>
  <form @submit.prevent="handleSubmit(onSubmit, onError)()">
    <input ref="usernameRef" v-model="usernameField" name="username">
    <input ref="passwordRef" v-model="passwordField" name="password">
    <input ref="ageRef" v-model="ageField" type="number" name="age">
    <button type="submit" v-text="'Submit'" />
  form>
template>

Start with class-validator

โš ๏ธ Remember to add these options to your tsconfig.json!

"strictPropertyInitialization": false,
"experimentalDecorators": true
import { IsString, Length, IsEmail } from 'class-validator' import { useClassValidator } from '@vue-use-form/class-validator' import { useForm } from 'vue-use-form' class LoginForm { @IsString() @Length(3, 10) username: string @IsEmail() email: string } const resolver = useClassValidator(LoginForm) const { register, createSubmitHandler, createErrorHandler } = useForm({ resolver, mode: 'onChange', }) const [usernameField] = register('username') const [emailField] = register('email') const onSubmit = createSubmitHandler((data) => { console.log(data) }) const onError = createErrorHandler((errors) => { console.log(errors) }) ">
<script lang="ts" setup>
import { IsString, Length, IsEmail } from 'class-validator'
import { useClassValidator } from '@vue-use-form/class-validator'
import { useForm } from 'vue-use-form'

class LoginForm {
  @IsString()
  @Length(3, 10)
  username: string

  @IsEmail()
  email: string
}

const resolver = useClassValidator(LoginForm)

const { register, createSubmitHandler, createErrorHandler } = useForm<LoginForm>({
  resolver,
  mode: 'onChange',
})

const [usernameField] = register('username')
const [emailField] = register('email')

const onSubmit = createSubmitHandler((data) => {
  console.log(data)
})
const onError = createErrorHandler((errors) => {
  console.log(errors)
})
script>

<template>
  <form @submit.prevent="handleSubmit(onSubmit, onError)()">
    <input v-model="usernameField" />
    <input v-model="emailField" />
  form>
template>

GitHub

https://github.com/vue-use-form/vue-use-form
You might also like...

A Vue.js directive for sending data from form and primitive validation

Vue Form Send A Vue.js directive for sending data from form and primitive validation inputs Installation npm i --save-dev vue-form-send import VueForm

Apr 13, 2022

Simple Vue.js form validation library

Simple Vue.js form validation library

Mar 1, 2020

Another validation form for the Vue. Validates input fields of multiple forms and displays errors

vue-coe-validator โœ… Another validation form for the Vue. Validates input fields of multiple forms and displays errors. Note: without any dependencies.

Jun 5, 2021

Flexible Vue.js form validation directive

Vue form validator A Vue.js directive for form validation Installation npm instal vue-smart-validator --save Getting Started In your scirpt entry poi

Nov 20, 2018

Vue.js plugin that covers the Buefy form fields for Formly.

Vue.js plugin that covers the Buefy form fields for Formly. It lets you to validate input data in your forms. The plugin combine simplicity of the Formly form builder, lightness of the Buefy form fields and impeccability of the Bulma design.

Nov 16, 2020

Form input errors and descriptions for Vue 2.

Form input errors and descriptions for Vue 2.

Feb 15, 2017

Simple and easy Vue directive for form validation.

Simple and easy Vue directive for form validation.

Simple and easy Vue.js directive for form validation.

Feb 15, 2021

Deadly simple form validation for Vue.js

vue-form-validator Deadly simple form validation for Vue.js. Features: Built in data types, including email, number, domain, url, etc. Customizable va

Aug 28, 2018

vue-form-data Vue่กจๅ•็ป„ไปถ๏ผŒ่ƒฝๅคŸๅœจๆ•ฐๆฎๅฑ‚้ชŒ่ฏ๏ผŒๆฒกๆœ‰ๆ ทๅผ

vue-form-data Vue่กจๅ•็ป„ไปถ๏ผŒ่ƒฝๅคŸๅœจๆ•ฐๆฎๅฑ‚้ชŒ่ฏ๏ผŒๆฒกๆœ‰ๆ ทๅผใ€‚

Oct 12, 2017
A dependency-free Vue plugin for formatting and validating credit card form fields.

A dependency-free Vue plugin for formatting and validating credit card form fields.

Jun 24, 2022
Vue 3 Hooks for consuming, validating and managing Forms.

@casthub/form provides Vue 3 Hooks for consuming, validating and managing Forms.

Jun 17, 2022
Vue composition function for Form Validation

Form Validation for Vue 3 Vue composition function for Form Validation with async rules. ?? Written in TypeScript ?? Dynamic Form support ?? Light wei

May 11, 2022
Vue Form with Laravel Inspired Validation and Simply Enjoyable Error Messages Api
Vue Form with Laravel Inspired Validation and Simply Enjoyable Error Messages Api

Vue Form with Laravel Inspired Validation and Simply Enjoyable Error Messages Api. (Form Api, Validator Api, Rules Api, Error Messages Api)

Jun 25, 2022
โœ… Form Validation for Vue.js
โœ…  Form Validation for Vue.js

vee-validate is a form validation library for Vue.js that allows you to validate inputs and build better form UIs in a familiar declarative style or u

Jul 4, 2022
RawModel.js plugin for Vue.js v2. Form validation has never been easier!

vue-rawmodel RawModel.js plugin for Vue.js v2. Form validation has never been easier! This plugin integrates RawModel.js framework into your Vue.js ap

Feb 3, 2022
Vue.js 2 form component that integrates jQuery Validation and Axios.

vue-vform Vue.js 2 form component that integrates jQuery Validation and Axios. Install Yarn yarn add vue-vform --dev NPM npm install vue-vform --save-

Jul 30, 2020
Form validation for Vue.js 2.2+

vue-form Form validation for Vue.js 2.2+ Install Available through npm as vue-form. import VueForm from 'vue-form'; // or var VueForm = require('vue-f

Apr 18, 2022
Vue form components with server-side validation in mind
Vue form components with server-side validation in mind

Vue form components with server side validation in mind About FormVuelar is a set of predefined vue form components which are designed to automaticall

Jun 12, 2022
Results of small 30 min online coding challenge + small polishing afterwards. Vue JS login form + Express JS login endpoint with CORS middleware and validation of request

Install dependencies: npm -i install Start FE: npm run serve ./frontend/src/main.js Start BE: node ./backend/controller/index.js ToDo: tests docker-co

Jan 14, 2022