How can I implement custom validation in Vue.js?

How can I implement custom validation in Vue.js?

You can create custom validation in Vue.js by using computed properties or custom directives. Would you like an example?

Yes, please provide an example of custom validation.

Sure! You can create a custom validation function and use it in your form component. For instance, you can validate an email like this:

methods: {
  validateEmail(email) {
    const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return re.test(String(email).toLowerCase());
  }
}

Then, you can call this method when the form is submitted.

How do I display error messages for invalid inputs?

You can use a data property to track the error message and display it conditionally in your template. For example:

<div v-if="errorMessage" class="error">{{ errorMessage }}</div>

And set the errorMessage in your validation method.