VeeValidate 多个密码约束

Question

我想知道是否可以将多个密码要求传递给 VeeValidate 以显示用户缺少哪些要求。

例如，如果我们要求用户的密码至少包含一个大写字母和至少一个数字，且长度至少为 5 个字符，并且用户输入 "a1bb"，我们希望能够显示两条错误消息；一种与不满足长度要求相关，另一种与不满足大写要求相关。

最终，我们希望能够做这样的事情：

VeeValidate 可以吗？或者有任何类似方法的例子吗？

Answer 1

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

VeeValidate only generates one message per field by default as it uses a fast-exit strategy when running the validation pipeline. [...] To disable this behavior you may want to configure the fastExit option in VeeValidate's config or use the continues modifier. (source)

对于您要应用到密码的规则，您可以使用现有的min 最小长度规则。

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

所以你需要定义custom rules。我在 created 挂钩中的下面的代码片段中放了一些示例，但您也可以全局定义它们。

在我的示例中，我通过按规则名称检查错误来创建 return a css class 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/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>

Answer 2

检查这个解决方案

制作自定义规则表格 VEEVALIDATE

强密码验证

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

VeeValidate 多个密码约束

VeeValidate multiple password constraints

passwords

validation

vue.js

vee-validate