VeeValidate несколько ограничений пароля

Мне интересно, можно ли передать VeeValidate несколько требований к паролю, чтобы отображать, какие требования отсутствуют у пользователя.

Например, если мы требуем, чтобы пароль пользователя содержал хотя бы одну заглавную букву и хотя бы одну цифру и состоял не менее чем из 5 символов, а пользователь вводил «a1bb», мы хотели бы иметь возможность отображать две ошибки. Сообщения; один связан с невыполнением требования к длине, а другой - с невыполнением требования к прописным буквам.

В конечном итоге мы хотели бы иметь возможность делать что-то вроде этого: введите описание изображения здесь

Возможно ли это с VeeValidate? Или есть примеры подобного подхода?


validation passwords vue.js vee-validate
person user2909019    schedule 14.03.2019    source источник
comment
У меня сейчас нет времени писать ответ, но я думаю, вам стоит взглянуть на baianat.github.io/vee-validate/guide/components/   -  person Toodoo    schedule 14.03.2019
comment
Мне также интересно, если кто-то уже сделал то, что вы просили   -  person Toodoo    schedule 14.03.2019
comment
Вам может оказаться полезным Справочник - проверка пароля.   -  person ctwheels    schedule 27.03.2019

Ответы (2)


arrow_upward
7
arrow_downward

VeeValidate позволяет отображать несколько полей ошибок, но сначала необходимо отключить параметр конфигурации fastExist:

VeeValidate по умолчанию генерирует только одно сообщение для каждого поля, поскольку использует стратегию быстрого выхода при запуске конвейера проверки. [...] Чтобы отключить это поведение, вы можете настроить опцию fastExit в конфигурации VeeValidate или использовать модификатор продолжения. (источник)

Для правил, которые вы хотите применить к паролю, вы можете использовать существующий min правила минимальной длины.

Для других правил (проверка верхнего регистра, нижнего регистра, специального символа и цифры) речь идет о проверке регулярного выражения. VeeValidate фактически предоставляет regex правило, но в вашем случае вам нужно несколько правил.

Поэтому вам нужно определить custom правила. Я поместил несколько примеров в фрагмент ниже в ловушке created, но вы также можете определить их глобально.

В моем примере я создаю метод для возврата класса css error, проверяя ошибки по имени правила. (source)
Теперь стиль ваш.

const config = {
  fastExit: false
}
Vue.use(VeeValidate, config)

new Vue({
  el: "#app",
  data() {
    return { password: '' }
  },
  created() {
    this.$validator.extend('upCase', {
      getMessage: () => "One uppercase character",
      validate: value => value.match(/[A-Z]/g) !== null
    })
    this.$validator.extend('number', {
      getMessage: () => "One number",
      validate: value => value.match(/[0-9]/g) !== null
    })
  },
  methods: {
    errorClass(rule) {
      return {
        'error': this.errors.firstByRule('password', rule)
      }
    }
  }
})
li {
  color: #B1B1B1;
}
li.error {
  color: #262626;
}
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vee-validate.js"></script>
<div id="app">
  <input type="text" v-validate="'min:8|number|upCase'" name="password" >
  <ul>
    <li :class="errorClass('upCase')">One uppercase character</li>
    <li :class="errorClass('number')">One number</li>
    <li :class="errorClass('min')">8 characters minimum</li>
  </ul>
</div>

person Sovalina    schedule 14.03.2019

arrow_upward
0
arrow_downward

проверьте это решение

создать форму пользовательского правила VEEVALIDATE

СИЛЬНАЯ ПРОВЕРКА ПАРОЛЯ

http://frankclark.xyz/veevalidate-strong-password-and-confirmation-validation

person mohammad nazari    schedule 05.05.2020