User Registration Form Validator

Build a user registration form validator that tracks validation state and provides real-time feedback based on user interactions.

Requirements

Create a Vue 3 component that validates a user registration form with the following fields:

• username: Required, minimum 3 characters, maximum 20 characters
• email: Required, valid email format
• password: Required, minimum 8 characters
• confirmPassword: Required, must match password

The validator should:

1. Track whether each field has been interacted with by the user
2. Display validation errors only for fields that have been touched
3. Indicate the overall form validation status
4. Provide a way to mark all fields as touched when the form is submitted

Test Cases

• When the username field changes from empty to "ab", the username field's dirty state becomes true @test
• When the email field is invalid but not yet touched, no error is displayed for that field @test
• When any required field is empty, the overall validation state indicates the form is invalid @test
• When form submission is triggered, all fields are marked as touched @test

Implementation

@generates

API

/**
 * Returns a validation configuration object for the registration form
 *
 * @param {Object} formData - Reactive form data object with username, email, password, confirmPassword
 * @returns {Object} Validation state object with validation rules and state tracking
 */
export function createRegistrationValidator(formData);

Dependencies { .dependencies }

@vuelidate/core { .dependency }

Provides validation state management with dirty, error, and invalid state tracking.

@vuelidate/validators { .dependency }

Provides common validation rules like required, email, and length validators.