User Registration Form with Smart Validation

Introduction { .introduction }

Build a user registration form component that demonstrates smart validation behavior using different validation strategies. The form should optimize user experience by validating fields at appropriate times based on the field type and user interaction patterns.

Dependencies { .dependencies }

@vuelidate/core { .dependency }

Provides validation functionality for Vue.js applications.

@vuelidate/validators { .dependency }

Collection of commonly used validators.

Requirements

Implement a Vue 3 component that creates a user registration form with the following fields:

1. Username field - Must be required and have minimum 3 characters
2. Email field - Must be required and have valid email format
3. Password field - Must be required and have minimum 8 characters
4. Confirm Password field - Must match the password field

The component must implement smart validation behavior using configuration options:

• Lazy validation: Username and email fields should only validate after the user finishes editing (on blur/touch), not while typing
• Auto-dirty mode: Password field should automatically become dirty when the user types, showing validation errors immediately
• Manual validation: Confirm password field should only validate when explicitly triggered, not on every keystroke

The component should include a submit handler that validates the entire form before submission.

Test Cases { .test-cases }

Test case 1: Lazy validation for username { .test-case @test }

Setup:

• Render the registration form component
• Username field is initially empty

Actions:

1. Type "ab" into the username field (below minimum length)
2. Do not blur or leave the field

Expected outcome:

• No validation error should be displayed while typing
• The field should not show an error state

Test case 2: Auto-dirty password field { .test-case @test }

Setup:

• Render the registration form component
• Password field is initially empty

Actions:

1. Type "12345" into the password field (below minimum length)

Expected outcome:

• Validation error should appear immediately while typing
• The password field should show as invalid because it's automatically marked dirty

Test case 3: Manual validation for confirm password { .test-case @test }

Setup:

• Render the registration form component
• Password field has value "password123"
• Confirm password field is initially empty

Actions:

1. Type "wrongpass" into confirm password field
2. Trigger form validation programmatically

Expected outcome:

• Confirm password field shows no error before validation is triggered
• After triggering validation, the confirm password field shows a mismatch error

Implementation Notes

Create a file registration-form.test.js that exports your component and includes test cases demonstrating the validation behaviors described above.

The component should be a standard Vue 3 component using either Options API or Composition API, whichever you prefer.

Focus on correctly configuring the validation behavior for different fields rather than styling or advanced UI features.