validation - VeeValidate多个密码约束

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

例如，如果我们要求用户密码至少包含一个大写字母和至少一个数字，并且至少包含5个字符，并且用户键入“a1bb”，我们希望能够显示两个错误信息;其中一项与长度要求不符，另一项与大写要求不符。

最终，我们希望能够执行以下操作:


VeeValidate可以做到吗？还是有类似方法的例子？

最佳答案

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



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

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

因此，您需要定义 custom rules 。我在created钩子(Hook)下面的代码段中放置了一些示例，但您也可以全局定义它们。

在我的示例中，我创建了一种通过按规则名称检查错误来返回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>

关于validation - VeeValidate多个密码约束，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55170199/