Bimg upade
Alternative syntax to declare form rules. While this does not mimic the exact structure the main form has, it can simplify rule declaration. In most cases the user does not care what kind of key/id the rule is declared for. Those rules are almost exclusively declared as { validateName: validateName() }. To simplify use-cases as such, there should be a support to simply insert an array of rules.
New rule definition
Introducing the new defineRules helper. This helper produces a rules object, which can be then used by the useValidation composable. This might slightly alter the way you define form validation in your components.
// Define a form object as usual
const form = reactive({
name: '',
meta: {
age: 0,
}
})
// Define rules object using the helper
const rules = defineRules<typeof form>({
// All the rules object keys are provided with your IDE autocomplete!!! Even nested items
name: { required },
meta: {
// New syntax!! Define rules with an array, much shorter
age: [required, minValue(3), maxValue(18)]
}
})Composable refactor
Some of the returned data from the composable have been changed. Removed run ans $ (which was the whole internal composable state)
const {
// All of these are now refs!! Not sure why they weren't before
anyError,
pending,
errors,
// These are the same
validate,
addError,
reset
} = useValidation(form, rules)Renaming
$def->defineRule$defineParam->defineRuleArg
Rule defining functions now have an optional third parameter to provide the name of the validator. These names are only used if you're referencing specific errors and in most cases you will be more than good with the default names.
Every single rule now has a name property. This property is used for the array declaration rules, because object declaration automatically supports naming.
Full Changelog: v1.1.2...v2.0.0