vue-tiny-validator
v0.0.2
Published
Tiny form validation tool for Vue 3
Downloads
88
Maintainers
Readme
Vue Tiny Validator
Tiny validation library (<0.7K gzipped) without dependencies for Vue 3 that serves as building blocks. Inspired by vee-validate
and vuetify
's validation.
- Non-intrusive in the way you build or style form components. It simply hooks the
modelValue
and gives you the error message to display. - Reset validation errors for a specific field or for the whole form.
- Build your own rules as simple functions that return
true
or error message. You control everything, including i18n. - Supports asynchronous rules (e.g. checking if a field value already exists in DB).
- Fully typed.
Installation
npm i vue-tiny-validator
# or
yarn add vue-tiny-validator
Usage
Parent component (form):
import { defineComponent, ref } from 'vue'
import { useForm } from 'vue-tiny-validator'
export default defineComponent({
setup() {
const myValue = ref('')
const { validate, errors } = useForm()
const submit = () => {
if (validate()) {
// Validated, submit form
// ...
return
}
console.warn('Form errors!', errors.value)
}
return { myValue, submit }
},
})
<form @submit.prevent="submit">
<MyInput v-model="myValue" />
<button>Submit</button>
</form>
Child component (input):
import { defineComponent, watch } from 'vue'
import { useField } from 'vue-tiny-validator'
export default defineComponent({
name: 'MyInput',
props: {
modelValue: {
type: String,
default: '',
},
},
setup(props) {
// Rules return `true` on success or a string with an error message on failure.
const isRequired = (v) => !!v || 'Required!'
const { validate, error } = useField({
value: () => props.modelValue,
rules: [isRequired],
})
// Optionally validate it every time the model changes.
// This could be debounced, or used in @blur event instead.
watch(() => props.modelValue, validate)
return { error }
},
})
<label>
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
/>
<span>{{ error }}</span>
</label>
See the example for more options.
Rules
Rules are simple functions that return true
on success or an error message on failure. Examples:
const isRequired = (v) => !!v || 'Required'
const minLength = (v) => v?.length >= 3 || 'Min length 3'
const positiveNumber = (v) => v >= 1 || 'Only positive numbers'
const pattern = (v) => /^[a-z0-9_#]+$/i.test(v) || t('form.invalidPattern') // using vue-i18n
Async rules
Rules can also be asynchronous:
const isUnique = async (v) => {
const response = await fetch(`/api/is-unique/${v}`)
// Assuming API returns non-200 code when not unique
return response.ok || 'Already in use'
}
In this case, you'll need to use validateAsync
instead of validate
:
const { validateAsync } = useForm()
const submit = async () => {
if (await validateAsync()) {
// valid, submit
}
// invalid
}