Reactive Form Validation in Vue with TypeScript

This challenge focuses on implementing robust and reactive form validation within a Vue.js application using TypeScript. Form validation is a crucial aspect of web development, ensuring data integrity and providing a user-friendly experience by guiding users to correct input. You'll build a component that handles various validation rules and provides clear feedback to the user.

Problem Description

You are tasked with creating a Vue component that manages a simple user registration form. The form should include fields for "Username," "Email," and "Password." The component must implement the following validation rules:

• Username: Must be between 3 and 20 characters long.
• Email: Must be a valid email address format.
• Password: Must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, and one number.

The component should:

• Maintain the form data in its reactive state.
• Validate each field as the user types (real-time validation).
• Display error messages below each input field when validation fails.
• Disable the submit button until all fields are valid.
• Provide a visual indication (e.g., a class) to show which fields are currently valid or invalid.

Expected Behavior:

• As the user types, the validation status of each field should update immediately.
• Error messages should be clear and informative, guiding the user on how to correct the input.
• The submit button should only be enabled when all fields pass validation.
• The component should be reusable and easily adaptable to different form structures and validation rules.

Edge Cases to Consider:

• Empty input fields.
• Invalid email formats (e.g., missing "@" symbol, invalid domain).
• Passwords that do not meet the complexity requirements.
• Handling of whitespace in the username field.

Examples

Example 1:

Input: Username: "Jo", Email: "test@example.com", Password: "password"
Output: Username field marked as invalid with error message "Username must be between 3 and 20 characters long." Email field marked as valid. Password field marked as invalid with error message "Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, and one number." Submit button disabled.
Explanation: The username is too short, and the password doesn't meet the complexity requirements.

Example 2:

Input: Username: "JohnDoe", Email: "valid@email.com", Password: "StrongPass123"
Output: All fields marked as valid. Submit button enabled.
Explanation: All fields meet the validation criteria.

Example 3:

Input: Username: "VeryLongUsernameThatExceedsTheLimit", Email: "invalid-email", Password: "short"
Output: Username field marked as invalid with error message "Username must be between 3 and 20 characters long." Email field marked as invalid with error message "Invalid email format." Password field marked as invalid with error message "Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, and one number." Submit button disabled.
Explanation: Demonstrates multiple invalid fields and their corresponding error messages.

Constraints

• The solution must be written in TypeScript.
• The component should be implemented using Vue 3's Composition API.
• The validation logic should be encapsulated within the component.
• The component should be reasonably performant; avoid unnecessary re-renders.
• The solution should be well-structured and easy to understand.
• You are free to use any Vue 3-compatible libraries for validation, but the core validation logic should be implemented within the component.

Notes

• Consider using a reactive object to store the form data and validation errors.
• You can use regular expressions for email validation and password complexity checks.
• Think about how to make the validation rules configurable, so they can be easily changed without modifying the component's core logic.
• Focus on providing clear and helpful error messages to the user.
• The visual indication of valid/invalid fields can be achieved using CSS classes.
• Start with a basic implementation and gradually add more features and edge case handling.