vue-use-form

Install

1# npm
2npm i vue-use-form
3
4# pnpm
5pnpm i vue-use-form
6
7# yarn
8yarn add vue-use-form

Quick Start

1<script setup lang="ts">
2import { useForm } from 'vue-use-form'
3
4interface Inputs {
5  username: string
6  password: string
7  age: number
8}
9
10const {
11  formState,
12  register,
13  createSubmitHandler,
14  createErrorHandler,
15  reset,
16  handleSubmit,
17  setError,
18  clearErrors,
19  setValue,
20  setFocus,
21  getValues,
22  triggerValidate,
23  getFieldState,
24  unregister,
25} = useForm<Inputs>({
26  mode: 'onChange',
27  shouldFocusError: true,
28})
29
30const [usernameField, usernameRef] = register('username', {
31  required: 'Username is required!',
32  minLength: { value: 3, message: 'Username must be at least 3 characters' },
33  maxLength: { value: 10, message: 'Username must be at most 10 characters' },
34  validate: (value) => {
35    if (value === 'admin') {
36      return 'Username is reserved!'
37    }
38  },
39})
40
41const [passwordField, passwordRef] = register('password', {
42  required: 'Password is required!',
43  minLength: { value: 8, message: 'Password must be at least 8 characters' },
44  maxLength: { value: 20, message: 'Password must be at most 20 characters' },
45  validate: {
46    isContainLowercase: (value) => {
47      if (!/[a-z]/.test(value)) {
48        return 'Password must contain at least one lowercase letter'
49      }
50    },
51    isContainUppercase: (value) => {
52      if (!/[A-Z]/.test(value)) {
53        return 'Password must contain at least one uppercase letter'
54      }
55    },
56  },
57})
58
59const [ageField, ageRef] = register('age', {
60  required: 'Age is required!',
61  min: { value: 18, message: 'Age must be at least 18' },
62  max: { value: 10000, message: '?' },
63  valueAsNumber: true,
64})
65
66const onSubmit = createSubmitHandler((data) => {
67  console.log('validate success', data)
68})
69
70const onError = createErrorHandler((errors) => {
71  console.log('validate error', errors)
72})
73</script>
74
75<template>
76  <form @submit.prevent="handleSubmit(onSubmit, onError)()">
77    <input ref="usernameRef" v-model="usernameField" name="username">
78    <input ref="passwordRef" v-model="passwordField" name="password">
79    <input ref="ageRef" v-model="ageField" type="number" name="age">
80    <button type="submit" v-text="'Submit'" />
81  </form>
82</template>