Vuejs：vuelidate条件验证

Question

假设我们有一个密码字段，并且我们想要对长度、特殊字符、数字、大写和小写等进行一些验证，前提是该字段有值

我们如何使用 vuelidate 做到这一点。

我在这里导入 vuelidate

import { required, minLength, maxLength, email, sameAs } from 'vuelidate/lib/validators'

这里是验证

validations: {
    editedItem: {
      firstname: { required, minLength: minLength(3), maxLength: maxLength(20) },
      lastname: { required, minLength: minLength(3), maxLength: maxLength(20) },
      email: { required, email },
      password: {
        required,
        minLength: minLength(6),
        maxLength: maxLength(15),
        oneNumber,
        oneUpperCase,
        oneLowerCase,
      },
      repassword: {
        sameAsPassword: sameAs('password'),
      },
    },
  }

,

oneNumber、oneUpperCase 和 oneLowerCase 是自定义验证：

const oneNumber = (value) => /[0-9]/.test(value)
const oneUpperCase = (value) => /[A-Z]/.test(value)
const oneLowerCase = (value) => /[a-z]/.test(value)

我将永远感谢任何帮助或建议

Answer 1

我的解决方案涉及一个单独的“自定义验证器”文件。

\n

validators.js:

\n

import { helpers as vuelidateHelpers } from 'vuelidate/lib/validators'\n\nexport const oneUppercase = value => {\n  if (!vuelidateHelpers.req(value)) {\n    return true\n  }\n  const match = value.match(/[A-Z]/g) || []\n  return match.length >= 1\n}\nexport const oneLowercase = value => {\n  if (!vuelidateHelpers.req(value)) {\n    return true\n  }\n  const match = value.match(/[a-z]/g) || []\n  return match.length >= 1\n}\nexport const oneSpecial = value => {\n  if (!vuelidateHelpers.req(value)) {\n    return true\n  }\n  const match = value.match(/[ !@#$%^&*()_+\\-=[\\]{};':"\\\\|,.<>/?]/g) || []\n  return match.length >= 1\n}\nexport const oneNumber = value => {\n  if (!vuelidateHelpers.req(value)) {\n    return true\n  }\n  const match = value.match(/\\d/g) || []\n  return match.length >= 1\n}\n

\n

在组件中，通过可视化格式让用户知道他们的密码是否符合要求：

\n

<template>\n  <form>\n    <label for="password">Password</label>\n    <input\n            id="password"\n            name="password"\n            type="password"\n            v-model="form.password"\n            @blur="$v.form.password.$touch()"\n            @input="validatePassword"\n    />\n    <label for="confirmPassword">Confirm Password</label>\n    <input\n            id="confirmPassword"\n            name="confirmPassword"\n            type="password"\n            v-model="form.confirmPassword"\n            @blur="$v.form.confirmPassword.$touch()"\n    />\n    <ul>\n      <li>\n          {{\n          passwordValidations.eightCharacters ?\n          '\xe2\x9c\x93':\n          '\xe2\x95\xb3'\n          }}\n        <span class="ml-1">MUST contain 8 characters</span>\n      </li>\n      <li>\n          {{\n          passwordValidations.oneUppercase ?\n          '\xe2\x9c\x93':\n          '\xe2\x95\xb3'\n          }}\n        <span class="ml-1">MUST contain one uppercase letter</span>\n      </li>\n      <li>\n          {{\n          passwordValidations.oneLowercase ?\n          '\xe2\x9c\x93':\n          '\xe2\x95\xb3'\n          }}\n        <span class="ml-1">MUST contain one lowercase letter</span>\n      </li>\n      <li>\n          {{\n          passwordValidations.oneNumber ?\n          '\xe2\x9c\x93':\n          '\xe2\x95\xb3'\n          }}\n        <span class="ml-1">MUST contain one number</span>\n      </li>\n      <li>\n          {{\n          passwordValidations.oneSpecial ?\n          '\xe2\x9c\x93':\n          '\xe2\x95\xb3'\n          }}\n        <span class="ml-1">MUST contain one special character</span>\n      </li>\n    </ul>\n  </form>\n</template>\n\n<script>\n  import {\n    required,\n    minLength,\n    sameAs,\n  } from 'vuelidate/lib/validators'\n  import {\n    oneNumber,\n    oneSpecial,\n    oneUppercase,\n    oneLowercase,\n  } from '../validators'\n\n  export default {\n    data () {\n      return {\n        form: {\n          password: '',\n          confirmPassword: '',\n        },\n        passwordValidations: {\n          eightCharacters: false,\n          oneUppercase: false,\n          oneLowercase: false,\n          oneNumber: false,\n          oneSpecial: false,\n        },\n      }\n    },\n    computed: {\n      passwordErrors () {\n        const errors = []\n        if (!this.$v.form.password.$dirty) return errors\n        !this.$v.form.password.required && errors.push('Password is required.')\n        return errors\n      },\n      confirmPasswordErrors () {\n        const errors = []\n        if (!this.$v.form.confirmPassword.$dirty) return errors\n        !this.$v.form.confirmPassword.required && errors.push('Please confirm your password.')\n        !this.$v.form.confirmPassword.sameAsPassword && errors.push('Passwords don\\'t match')\n        return errors\n      },\n    },\n    methods: {\n      validatePassword () {\n        this.passwordValidations.eightCharacters = this.$v.form.password.eightCharacters\n        this.passwordValidations.oneUppercase = this.$v.form.password.oneUppercase\n        this.passwordValidations.oneLowercase = this.$v.form.password.oneLowercase\n        this.passwordValidations.oneNumber = this.$v.form.password.oneNumber\n        this.passwordValidations.oneSpecial = this.$v.form.password.oneSpecial\n      },\n    },\n    validations: {\n      form: {\n        password: {\n          required,\n          minLength: minLength(8),\n          oneUppercase,\n          oneSpecial,\n          oneNumber,\n          oneLowercase,\n        },\n        confirmPassword: {\n          required,\n          sameAsPassword: sameAs('password'),\n        },\n      },\n    },\n  }\n</script>\n

\n