В недавнем проекте, над которым я работал, были серьезные проблемы с производительностью и некоторое раздувание package.json. Я решил избавиться от плагина валидатора, который мы использовали, и создать проверку для всех форм на сайте. Изменение каждой формы на сайте казалось большой задачей, поэтому мне нужно было сделать что-то, что было бы легко внедрить везде, что также везде работало и будет работать в будущем.

После некоторого размышления я придумал способ проверить все формы

setValidation(type){
      this[`${type}Valid`] = validators[type]()
}

и в моих данных

data(){
  return {
     emailValid: false
  }
}

и в моем поле ввода

setValidation(‘email’)

Этот код сделал несколько вещей, которые мне действительно были нужны. Здесь нет жестко запрограммированных проверок, и ему все равно, что находится в текущей форме или что нужно проверить, все, о чем он заботится, это наличие функции, соответствующей проверяемому типу. Ввод формы просто должен вызвать эту функцию, а затем проверить, верно ли соответствующее действительное значение данных.

Но… у него должны быть эти функции проверки, поэтому во вспомогательном файле я создал объект, называемый валидаторами, который выглядел так:

validators = {
    email : email
}

а затем создал функцию для проверки электронной почты

const email = (input = null) => {
let validEmailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
let email = input ? input : event.currentTarget.value.trim()
return validEmailRegex.test(String(email).toLowerCase())
}

Большую часть времени проверка будет вызываться при каком-либо изменении ввода, например при нажатии клавиши, поэтому я могу просто использовать event.target.value, но на всякий случай я разрешил ему также принимать аргумент для Проверка. Теперь в любое время, когда мне нужен новый тип проверки, я могу просто создать функцию, добавить ее к моему объекту и вызвать вызов поля ввода.

setValidation(‘mynewvalidation’)

Я могу быстро создавать множество новых типов проверки, не беспокоясь о том, что что-то сломается или мои компоненты станут большими.

Было еще одно неожиданное преимущество этого шаблона; Я мог сопоставить разные входные данные с одним и тем же валидатором, поэтому мне больше не нужно было писать код. У меня было много полей ввода, где я просто хотел, чтобы длина пользовательского ввода была больше четырех, в моем объекте валидаторов все, что мне нужно было сделать, это сопоставить проверку с функцией, которую я хотел.

const present = (input = null) => {
    return input ? input.length > 4 : event.currentTarget.value.length > 4
}
const validators = {
   present:present
   firstName: present
   lastName: present
   email:email
   contactName:present
}

Код очень быстро становится самодокументируемым и свободным от ошибок. Я могу просматривать все типы валидаторов, которые у меня есть, а также иметь пользовательские проверки для каждого типа ввода, сохраняя при этом ценные нажатия клавиш.

Надеюсь, это поможет вам в следующий раз, когда вам понадобится пройти проверку или в другой раз, когда вам нужно будет выполнить одно и то же действие с большим количеством элементов DOM терминов, но немного по-другому.