register
This method allows you to register field and ref to bind components for apply validation rules of vue-hooks-form.
Type
type RegisterFn<T extends FiledValues, V = T[typeof name]> =
(name: keyof T, options: RegisterOptions<T>) => {
[options.vModelBinding]: V
[`onUpdate:${options.vModelBinding}`]: (input: V) => void
value?: V
onInput?: (e: InputEvent) => void
}
type RegisterFn<T extends FiledValues, V = T[typeof name]> =
(name: keyof T, options: RegisterOptions<T>) => {
[options.vModelBinding]: V
[`onUpdate:${options.vModelBinding}`]: (input: V) => void
value?: V
onInput?: (e: InputEvent) => void
}
Usage
<script setup lang="ts">
import { useForm } from '@vue-hooks-form/core'
const {
register,
formState: { errors }
} = useForm<{ username: number }>()
</script>
<template>
<input :="register('username')">
</template>
<script setup lang="ts">
import { useForm } from '@vue-hooks-form/core'
const {
register,
formState: { errors }
} = useForm<{ username: number }>()
</script>
<template>
<input :="register('username')">
</template>
Details
<input :="register()" />
is equal to <input v-bind="register()"/>
<input :="register('username')">
<input v-bind="register('username')">
<input :="register('username')">
<input v-bind="register('username')">
required
A Boolean which, if true, indicates that the input must have a value before the form can be submitted. You can assign a string to return an error message in the errors object.
Type
type Required = string | boolean
type Required = string | boolean
Usage
<input :="register('username', { required: true })"/>
<input :="register('username', { required: true })"/>
maxLength
Type
<script setup lang="ts">
type maxLength = number | { value: number; message: string };
</script>
<script setup lang="ts">
type maxLength = number | { value: number; message: string };
</script>
Usage
register('username', {
maxLength: 20
})
register('username', {
maxLength: {
value: 20,
message: 'The maximum length of username is 20!'
}
})
register('username', {
maxLength: 20
})
register('username', {
maxLength: {
value: 20,
message: 'The maximum length of username is 20!'
}
})
minLength
The minimum length of the value to accept for this input.
Type
<script setup lang="ts">
type minLength = number | { value: number; message: string };
</script>
<script setup lang="ts">
type minLength = number | { value: number; message: string };
</script>
Usage
register('username', {
minLength: {
value: 3,
message: 'The minimumlength of username is 3!'
}
})
register('username', {
minLength: {
value: 3,
message: 'The minimumlength of username is 3!'
}
})
max
The maximum value to accept for this input.
Type
<script setup lang="ts">
type max = number | { value: number; message: string };
</script>
<script setup lang="ts">
type max = number | { value: number; message: string };
</script>
Usage
<template>
<input
type="number"
:="register('count', {
max: {
value: 150,
message: 'The maximum value of count is 150!'
},
valueAsNumber: true
})"
/>
</template>
<template>
<input
type="number"
:="register('count', {
max: {
value: 150,
message: 'The maximum value of count is 150!'
},
valueAsNumber: true
})"
/>
</template>
min
The minimum value to accept for this input.
Type
<script setup lang="ts">
type min = number | { value: number; message: string };
</script>
<script setup lang="ts">
type min = number | { value: number; message: string };
</script>
Usage
<template>
<input
type="number"
:="register('count', {
min: {
value: 20,
message: 'The minimum value of count is 150!'
},
valueAsNumber: true
})"
/>
</template>
<template>
<input
type="number"
:="register('count', {
min: {
value: 20,
message: 'The minimum value of count is 150!'
},
valueAsNumber: true
})"
/>
</template>
pattern
The regex pattern for the input.
Type
<script setup lang="ts">
type pattern = RegExp | { value: RegExp; message: string };
</script>
<script setup lang="ts">
type pattern = RegExp | { value: RegExp; message: string };
</script>
Usage
// RegExp
register('test', {
pattern: /[A-Za-z]{3}/
})
// { value: RegExp; message: string }
register('test', {
pattern: {
value: /[A-Za-z]{3}/,
message: 'The max length of test field is 3.'
}
})
// RegExp
register('test', {
pattern: /[A-Za-z]{3}/
})
// { value: RegExp; message: string }
register('test', {
pattern: {
value: /[A-Za-z]{3}/,
message: 'The max length of test field is 3.'
}
})
disabled
Set disabled to true will disable input control.
Type
const disabled: boolean = false
const disabled: boolean = false
Usage
register('disabled', {
disabled: true
})
register('disabled', {
disabled: true
})
Detail
The disabled
attribute only takes effect by setting the attribute of input/select/textarea
like setAttribute/removeAttribute
and not updating its inputValue.
validate
You can pass a callback function as the argument to validate, or you can pass an object of callback functions to validate all of them. This function will be executed on its own without depending on other validation rules included in the required attribute.
Type
type ValidateFn = (val: unknown) =>
(boolean | string) | Promise<boolean | string>
type validate = ValidateFn | Record<string, ValidateFn>
type ValidateFn = (val: unknown) =>
(boolean | string) | Promise<boolean | string>
type validate = ValidateFn | Record<string, ValidateFn>
Usage
register('test', {
validate: value => value === '1'
})
// object of callback functions
register('test1', {
validate: {
positive: v => parseInt(v) > 0,
lessThanTen: v => parseInt(v) < 10,
checkUrl: async () => await fetch(),
}
})
register('test', {
validate: value => value === '1'
})
// object of callback functions
register('test1', {
validate: {
positive: v => parseInt(v) > 0,
lessThanTen: v => parseInt(v) < 10,
checkUrl: async () => await fetch(),
}
})
valueAsNumber
Returns a Number normally. If something goes wrong NaN
will be returned.
Type
const valueAsNumber: boolean = false
const valueAsNumber: boolean = false
Usage
<template>
<input
:="register('test', {
valueAsNumber: true,
})"
type="number"
>
</template>
<template>
<input
:="register('test', {
valueAsNumber: true,
})"
type="number"
>
</template>
valueAsDate
Returns a Date object normally. If something goes wrong Invalid Date
will be returned.
Type
const valueAsDate: boolean = false
const valueAsDate: boolean = false
Usage
<template>
<input
:="register('test', {
valueAsDate: true,
})"
type="date"
>
</template>
<template>
<input
:="register('test', {
valueAsDate: true,
})"
type="date"
>
</template>
setValueAs
Return input value by running through the function.
Type
<script setup lang="ts">
type SetValueAs = (value: any) => any;
</script>
<script setup lang="ts">
type SetValueAs = (value: any) => any;
</script>
Usage
register('test', {
setValueAs: v => parseInt(v)
})
register('test', {
setValueAs: v => parseInt(v)
})
Examples
<script setup>
import { useForm } from '@vue-hooks-form/core'
const { register, handleSubmit } = useForm({
defaultValues: {
firstName: '',
lastName: '',
category: '',
checkbox: [],
radio: ''
}
})
const onSubmit = (data) => {
console.log(data)
}
const onError = (errors) => {
console.log(errors)
}
</script>
<template>
<form @submit.prevent="handleSubmit(onSubmit, onError)()">
<input :="register('firstName', { required: true })" placeholder="First name">
<input :="register('lastName', { minLength: 2 })" placeholder="Last name">
<select :="register('category')">
<option value="">
Select...
</option>
<option value="A">
Category A
</option>
<option value="B">
Category B
</option>
</select>
<input :="register('checkbox')" type="checkbox" value="A">
<input :="register('checkbox')" type="checkbox" value="B">
<input :="register('checkbox')" type="checkbox" value="C">
<input :="register('radio')" type="radio" value="A">
<input :="register('radio')" type="radio" value="B">
<input :="register('radio')" type="radio" value="C">
<input type="submit">
</form>
</template>
<script setup>
import { useForm } from '@vue-hooks-form/core'
const { register, handleSubmit } = useForm({
defaultValues: {
firstName: '',
lastName: '',
category: '',
checkbox: [],
radio: ''
}
})
const onSubmit = (data) => {
console.log(data)
}
const onError = (errors) => {
console.log(errors)
}
</script>
<template>
<form @submit.prevent="handleSubmit(onSubmit, onError)()">
<input :="register('firstName', { required: true })" placeholder="First name">
<input :="register('lastName', { minLength: 2 })" placeholder="Last name">
<select :="register('category')">
<option value="">
Select...
</option>
<option value="A">
Category A
</option>
<option value="B">
Category B
</option>
</select>
<input :="register('checkbox')" type="checkbox" value="A">
<input :="register('checkbox')" type="checkbox" value="B">
<input :="register('checkbox')" type="checkbox" value="C">
<input :="register('radio')" type="radio" value="A">
<input :="register('radio')" type="radio" value="B">
<input :="register('radio')" type="radio" value="C">
<input type="submit">
</form>
</template>