vue.js - 如何使用Vuelidate验证密码？

Question

问候，
我需要验证密码表单
除了需要的字段
必须至少有一个大写字母，至少有小写字母，数字至少有一个和至少一个以下字符“#?!@$%^&*-”
我正在使用这个包 https://vuelidate.js.org/

编辑

或为此使用正则表达式

Answer 1

只需在 Vuelidate 验证中添加一个带有您想要的规则的自定义函数。

validations: {
  password: {
    required,
    // minLength: minLength(8)  // I assume you'd want something like this too
    valid: function(value) {
      const containsUppercase = /[A-Z]/.test(value)
      const containsLowercase = /[a-z]/.test(value)
      const containsNumber = /[0-9]/.test(value)
      const containsSpecial = /[#?!@$%^&*-]/.test(value)
      return containsUppercase && containsLowercase && containsNumber && containsSpecial
    }
  }
}

将每个需求分解为单独的功能可能会有所帮助，因此您可以为每个需求设置不同的错误消息(这将有助于指导用户他们需要修复什么)。

validations: {
  password: {
    required,
    // minLength: minLength(8)  // I assume you'd want something like this too
    containsUppercase: function(value) {
      return /[A-Z]/.test(value)
    },
    containsLowercase: function(value) {
      return /[a-z]/.test(value)
    },
    containsNumber: function(value) {
      return /[0-9]/.test(value)
    },
    containsSpecial: function(value) {
      return /[#?!@$%^&*-]/.test(value)
    }
  }
}