Как установить правила валидации в vuelidate, чтобы они имели значение, аналогичное полю объекта? - PullRequest
Новая
       21

Как установить правила валидации в vuelidate, чтобы они имели значение, аналогичное полю объекта?

1 голос
/ 07 мая 2019

Допустим, у меня есть компонент vue с данными, подобными этим: 

  data: () => ({
    form: {
      old_password: {
        data: '',
        type: 'password',
        label: 'Old Password',
      },
      new_password: {
        data: '',
        type: 'password',
        label: 'New Password',
      },
      repeat_password: {
        data: '',
        type: 'password',
        label: 'New Password Confirmation',
      },
    },
  }),

Данные форматируются таким образом, поскольку я использую другой плагин, ant-design, для построения формы, ипоэтому форматирование данных другим способом не вариант.В поле data будут храниться фактические данные.

Затем у меня установлены следующие правила проверки для vuelidate. 

  validations: {
    form: {
      old_password: {
        data: { required },
      },
      new_password: {
        data: { required },
      },
      repeat_password: {
        data: { sameAsPassword: sameAs('new_password') },
      },
    },
  },

Правила required работают, но sameAsPassword правило не работает.Это всегда возвращает ошибку, даже я уверен, что я ввожу один и тот же пароль.Я думаю, это не по сравнению с правильным полем.Как установить правило так, чтобы оно сравнивалось с правильным полем?

Ответы [ 2 ]

1 голос
/ 07 мая 2019

Прежде всего: не рекомендуется использовать функцию стрелки для данных.Вы должны использовать: 

data() {
 return {
   form: {}
 }
}

Вы можете столкнуться с проблемами контекста ..

И я не знаю, нужны ли вам эти данные внутри проверок ... вы можете попробовать это: 

export default {
  data() {
    return {
      form: {
        nestedA: '',
        nestedB: ''
      }
    }
  },
  validations: {
    form: {
      nestedA: {
        required
      },
      nestedB: {
        required
      }
    }
  }
}
1 голос
/ 07 мая 2019

new_password - это не брат repeat_password.data.Из встроенных документов валидатора

  • Локатор может быть именем свойства-брата или функцией.Когда предоставляется как функция, она получает проверяемую модель в качестве аргумента, и это связано с экземпляром компонента, поэтому вы можете получить доступ ко всем его свойствам и методам, даже в рамках вложенной проверки.

Таким образом, функция должна быть передана в sameAs: 

validations: {
    form: {
      old_password: {
        data: { required },
      },
      new_password: {
        data: { required },
      },
      repeat_password: {
        data: { 
          sameAsPassword: sameAs(function() {
            return this.form.new_password.data;
          }) 
        },
      },
    },
  },

В то же время, чтобы this работал внутри функции, data необходимо изменить сфункция стрелки для возврата данных.т.е. 

data() {
    return {
      form: {
        old_password: {
          data: '',
          type: 'password',
          label: 'Old Password',
        },
        new_password: {
          data: '',
          type: 'password',
          label: 'New Password',
        },
        repeat_password: {
          data: '',
          type: 'password',
          label: 'New Password Confirmation',
        },
      },
    }
  },
...