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)
    }
  }
}