VeeValidate 多重密码约束

Question

我想知道是否可以将多个密码要求传递给VeeValidate，以显示用户缺少哪些要求。例如，如果我们要求用户的密码至少应包含一个大写字母和一个数字，并且长度至少为5个字符，而用户输入"a1bb"，我们希望能够显示两个错误消息；一个与未满足长度要求有关，另一个与未满足大写字母要求有关。最终，我们希望能够做到这样： 是否可能使用VeeValidate实现？或者是否有类似方法的示例？

- user2909019

---

我现在没有时间写答案，但我认为你应该看一下https://baianat.github.io/vee-validate/guide/components/validation-provider.html#scoped-slot-data。 - Toodoo

如果有人已经做过你所要求的事情，我也很感兴趣。 - Toodoo

你可能会发现参考 - 密码验证很有用。 - ctwheels

Answer 1

VeeValidate允许您显示多个错误字段，但是您需要先禁用fastExist配置选项：

VeeValidate默认情况下每个字段只生成一个消息，因为它在运行验证流水线时使用了快速退出策略。 [...] 要禁用此行为，您可能想要在VeeValidate的配置中配置fastExit选项或使用continues修饰符。（来源）

---

对于您想应用于密码的规则，可以使用现有的min规则来设置最小长度。

对于其他规则（检查大写、小写、特殊字符和数字），这涉及到正则表达式检查。实际上，VeeValidate提供了一个regex规则，但在您的情况下，您需要多个规则。

因此，您需要定义自定义规则。我在下面的created钩子中放了一些示例，但您也可以在整个应用程序中定义它们。

---

在我的示例中，我创建了一个方法来检查按规则名称检查错误并返回css类error。（来源）
现在样式由您决定。

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/vue@2.6.8/dist/vue.min.js"></script>
<script src="https://unpkg.com/vee-validate@2.0.0-rc.19/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>

- Sovalina

Answer 2

请检查这个解决方案

从VEEVALIDATE创建自定义规则表单

强密码验证

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

- mohammad nazari