Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Vue Composition API for validating form.

License

NotificationsYou must be signed in to change notification settings

vue-use-form/vue-use-form

Repository files navigation

Inspired byreact-hook-form, if you love react-hook-form usage, come on and try it!

Document

The usage is almost the same as that of the react-hook-form. you can goreact-hook-form to check.

Install

# npmnpm i vue-use-form# pnpmpnpm i vue-use-form# yarnyarn 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
      • 🍎 register -> disabled -> setValueAsDate
      • register -> support custom modelValue likev-model:checked
    • 🍊useFormState
    • 🍋useFieldArray
    • 🍎schema
      • 🍵 class-validator
      • 🍶 Yup
  • Test
    • 🐯Unit test
  • 🐼 Community(WIP...)
    • 🎋中文文档
    • 📖Documentation .

🎁Try it online

🎮play with element-plus by default way.

🎮play with class-validator by usingclass-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 dependenciespnpm i# 3. open the playground folder and run `dev` script orpnpm run dev

Quick Start

<script setup lang="ts">import {useForm }from'vue-use-form'interfaceInputs {  age:number}const {  formState,  register,  createSubmitHandler,  createErrorHandler,}=useForm<Inputs>({  mode:'onChange',  shouldFocusError: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:="register('age', {          required: 'Age is required!',          min: { value: 18, message: 'Age must be at least 18' },          max: { value: 10000, message: '?' },          valueAsNumber: true,        })"type="number"name="age"    >    <buttontype="submit"v-text="'Submit'" />  </form></template>

use with schema

[8]ページ先頭
©2009-2025 Movatter.jp