How to use @vuelidate/validators - 2 common examples
To help you get started, we’ve selected a few @vuelidate/validators examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
vuelidate / vuelidate / packages / docs / src / .vuepress / components / AsComposition.vue View on Github 
function usePassword ({ minimumLength }) {
const password = ref('')
const repeatPassword = ref('')
const rules = {
password: {
required: withMessage('This field is required', required),
minLength: withMessage(
minLength(minimumLength),
({ $params }) => `Has to be at least ${$params.length} characters long`
),
asyncValidator: withMessage(
({ $pending, $model }) => $pending ? 'Checking!' : `Error! ${$model} Isn’t "aaaa"`,
asyncValidator
),
$autoDirty: true
},
repeatPassword: {
required,
sameAs: withMessage(
({ $params }) => $t('errors.sameAs', $params.equalTo),
sameAs(password)
),
$autoDirty: true
}required: withMessage('This field is required', required),
minLength: withMessage(
minLength(minimumLength),
({ $params }) => `Has to be at least ${$params.length} characters long`
),
asyncValidator: withMessage(
({ $pending, $model }) => $pending ? 'Checking!' : `Error! ${$model} Isn’t "aaaa"`,
asyncValidator
),
$autoDirty: true
},
repeatPassword: {
required,
sameAs: withMessage(
({ $params }) => $t('errors.sameAs', $params.equalTo),
sameAs(password)
),
$autoDirty: true
}
}
const $v = useVuelidate(
rules, { password, repeatPassword }, 'usePassword'
)
return {
$v,
password,
repeatPassword,
rules
}
}
