vue3-form
v1.2.8
Published
A form validation plugin for vue 3 and/or composition api
Downloads
73
Maintainers
Readme
vue3-form
This package offers form validation using vue 3 composition api
Installation
npm install vue3-form
Usage
<template>
<form @submit.prevent="submit">
<input v-model="form.fields.email.value" type="email" placeholder="Enter your email address" />
<!-- Display error message -->
<p>{{ form.fields.email.errors.required }}</p>
<p>{{ form.fields.email.errors.email }}</p>
<!-- OR -->
<p>
{{ getFieldError(form.fields.email).join(', ') }}
</p>
<input v-model="form.fields.password.value" type="password" placeholder="Enter your password" />
<!-- Display error message -->
<p>{{ form.fields.password.errors.required }}</p>
<p>{{ form.fields.password.errors.stringMin }}</p>
<!-- OR -->
<p>
{{ getFieldError(form.fields.password, 'stringMax') }}
</p>
<!-- OR -->
<p>
{{ getFieldError(form.fields.password).join(', ') }}
</p>
<button type="submit">
Login
</button>
</form>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { getFieldError, getRawFormData, useForm, validateForm } from 'vue3-form';
export default defineComponent({
setup() {
const form = useForm({
email: { rules: ['required', 'email'] },
password: {
rules: [
'required',
'stringMin:8',
'stringMax:32',
'alphabetsLowercase',
'alphabetsUppercase',
'numbers',
'specialCharacters',
'noSequence',
]
}
});
const submit = () => {
if (!validateForm(form)) {
// Form is invalid
return;
}
// Form is valid...
// proceed with submission.
const fields = getRawFormData(form);
}
return { form, getFieldError, submit };
},
});
</script>
Form instance structure
{
fields: Record<string, FormField>
error: string | null
success: string | null
loading: boolean
touched: boolean
valid: boolean
}
Form field instance structure
{
name: string
value: any
rules: string[]
errors: Record<string, string>
serverErrors: string[]
}
Available methods
useForm
Generates a new form instance.
getFields
Returns an array of all the fields in the form.
getFormData
Creates and returns a FormData instance using the fields of the form.
getRawFormData
Get a json object of the form using the field names as keys.
updateForm
Updates the states and properties of the form.
setFormErrors
Updates the errors of the fields in the form.
getFieldError
Returns either a single error or all errors of the field specified.
validateField
Checks and returns a fields validity.
validateForm
Checks and returns the validity of the specified form by validating all it's fields.
resetForm
Returns a form to it's initial state, including it's fields, and states.
Available validation rules
- alphabets
- alphabetsLowercase
- alphabetsLowercaseOnly
- alphabetsOnly
- alphabetsUppercase
- alphabetsUppercaseOnly
- array
- arrayContains
- arrayContains:string
- arrayDoesntContain
- arrayDoesntContain:string
- boolean
- date
- dateAfter
- dateAfter:string
- dateBefore
- dateBefore:string
- dateBetween
- dateBetween:string
- dateExact
- dateExact:string
- dateFormat
- dateFormat:string
- different
- exact
- exact:string
- false
- file
- files
- filesLength
- filesMax
- filesMin
- money
- name
- noSequence
- nullable
- numberBetween
- numberBetween:number,${number}
- numberExact
- numberExact:number
- numberMax
- numberMax:number
- numberMin
- numberMin:number
- numbers
- numbersOnly
- phone
- required
- specialCharacters
- specialCharactersOnly
- stringLength
- stringLength:number
- stringMax
- stringMax:number
- stringMin
- stringMin:number
- true
- url