Преобразование валидатора формы переключения / базовой формы во что-то, что поддерживает более одного случая - PullRequest
0 голосов
/ 17 июня 2019

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

https://codepen.io/jodriscoll/pen/pXyMqa?editors=0010

129: while ( error < rules.length ) {
130:     if ( !validations[rules[error]](vin_input.value) ) {

Когда определены правила (входные требования),извлечь входные данные value, а затем передать эти value внутренним функциям validations.Если одна из этих функций в пределах возвращает false, проверка останавливается, и switch (вывод ошибок) обрабатывает, какую ошибку необходимо устранить (основываясь на приоритете / порядке).

41: const validations = {
43:     // goal is to return true, then try the next validation requirement (order matters)
44:     required: function(value) {
45:         return value !== '';
46:     },
47:     special: function(value) {
48:         return value.match(/[^a-zA-Z0-9]/g) == null;
49:     },
50:     restricted: function(value) {
51:         return value.match(/[IiOoQq]/g) == null;
52:     },
53:     quantity: function(value) {
54:         return value.length > 16;
55:     },
56: };

problem: Из-за этого оператора switch он прекратит обработку будущих / дополнительных ошибок, если возвращаемое значение правила будет соответствовать условию случая.Моя цель - разрешить пользователю совершать множественные ошибки (для этого случая поиск «A * IQ &»), а затем при отправке формы они будут получать оповещения о каждой обнаруженной ошибке, а не о самом высоком приоритете.

179: switch( rules[error] ) {
189:     case 'required':

Я рассматриваю обработку ошибки в Object Literal, но скорее получу совет и (возможно) примеры различных мнений.

ОБНОВЛЕНИЕ № 1: Я смог обойти это как FYI (https://codepen.io/jodriscoll/pen/XLKKwa?editors=0010),, но я не доволен "раздуванием" и хотел использовать лучший подход.

1 Ответ

0 голосов
/ 17 июня 2019

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

let validations = {
  isValid: false,
  errors: [
    {
      type: 'required',
      message: 'You must provide a phone number.'
    },
    {
      type: 'quantity',
      message: 'The quantity selected must be between x and y.'
    }
  ]
}

Затем вы можете реорганизовать оператор switch в нечто более похожее на это:

validations.errors.forEach((error) => {
  switch(error.type){
    case 'required':
      // Do something.
      break;
    case 'quantity':
      // Do something else
      // etc...
  }
})
...