Comprehensive validation library for Vue.js applications providing common validators with built-in error messages and customization options
87
{
"context": "This criteria evaluates how effectively the engineer uses @vuelidate/core and @vuelidate/validators to implement a registration form validation system. The focus is on proper use of the useVuelidate composable function, built-in validators, and validation state management.",
"type": "weighted_checklist",
"checklist": [
{
"name": "useVuelidate Setup",
"description": "Correctly imports and calls useVuelidate() from @vuelidate/core to set up validation, passing the validation rules object and the reactive form data",
"max_score": 25
},
{
"name": "Validator Usage",
"description": "Correctly uses built-in validators from @vuelidate/validators: required for username/email/password/confirmPassword, alphaNum for username, email for email field, minLength for password (8 characters), and sameAs for confirmPassword matching",
"max_score": 30
},
{
"name": "Validation State Access",
"description": "Properly accesses validation state properties from the validation object returned by useVuelidate: $invalid for validity checking, $dirty for tracking user interaction, and $error for showing validation errors only on touched fields",
"max_score": 20
},
{
"name": "Validation Methods",
"description": "Correctly uses validation methods: $touch() to mark fields as dirty and $validate() to manually trigger validation of the entire form",
"max_score": 15
},
{
"name": "Rules Structure",
"description": "Properly structures the validation rules object with field names as keys and validator objects as values, matching the structure expected by useVuelidate",
"max_score": 10
}
]
}Install with Tessl CLI
npx tessl i tessl/npm-vuelidate--validatorsdocs
evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10