Vue.js - using Vuelidate url domain should match email domain

Question

I have two inputs field : url and email

I'm using Vuelidate and I want to make a custom validator where it checks if the url domain name is equal to the email domain name.

Valid example :

url: (https://)www.mydomain.example

email: johndoe@mydomain.example

Invalid example :

url: (https://)www.mydomain.example

email: johndoe@somedomaine.example

validations object :

validations: {
    form: {
      url: { required, url, maxLength: maxLength(2083) },
      email: { required, email, maxLength: maxLength(255) },
      lastName: { required, maxLength: maxLength(100) },
      firstName: { required, maxLength: maxLength(100) }
    }
  },

Answer 1

You could use a custom validator called matchUrl as follow :

  const matchUrl=(value, vm) => 
   value.substring(value.indexOf("@")+1) ===vm.url.substring(vm.url.indexOf(".")+1);

And use it as :

validations: {
 form: {
  url: { required, url, maxLength: maxLength(2083) },
  email: { required,matchUrl, email, maxLength: maxLength(255) },
  lastName: { required, maxLength: maxLength(100) },
   firstName: { required, maxLength: maxLength(100) }
 }
},

check this working example