在 Vuetify 中显示有关密码验证的不同消息？

Question

我有这样的密码规则

passwordRule(value){
 const pattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%\^&\*])(?=.{8,})/;
          return (
            pattern.test(value) ||
            "Min. 8 characters with at least one capital letter, a number and a special character."
          );
}

我目前正在使用

 <v-text-field
            autocomplete="current-password"
            :value="userPassword"
            label="Enter password"
            :append-icon="value ? 'mdi-eye' : 'mdi-eye-off'"
            :type="value ? 'password' : 'text'"
            :rules="[passwordRule]"
          ></v-text-field>

因为它目前显示“最少 8 个字符，其中至少有一个大写字母、一个数字和一个特殊字符。”作为错误消息，

如果密码没有大写字母，我该如何实现它应该只显示“至少 1 个大写字母”之类的消息。如果密码没有数字，它应该显示“需要数字”

请指导我如何实现？

Answer 1

您当前的规则假定密码必须仅包含 拉丁大写 个字母。

如果没问题，请使用下面代码中的 uppercaseEn 规则。否则最好使用 uppercase 规则。

<v-text-field
  v-model="password"
  :rules="[rules.uppercaseEn, rules.special, rules.number, rules.length]"
  label="Password"
></v-text-field>
...
data () {
  return {
    password: '',
    rules: {
      uppercase: value => {
        //For non-latin letters also
        return (value && value.toLowerCase() !== value) || 'At least 1 uppercase letter'
      },
      uppercaseEn: value => {
        //For latin letters only
        return /[A-Z]/.test(value) || 'At least 1 uppercase letter (A-Z only)'
      },
      number: value => {
        return /\d/.test(value) || 'At least 1 number'
      },
      special: value => {
        return /[!@#$%\^&\*]/.test(value) || 'At least 1 special symbol'
      },
      length: value => {
        return (value && value.length >= 8) || 'Min password length: 8 symbols'
      }
    },
  }
}

测试这个 at CodePen。

在 Vuetify 中显示有关密码验证的不同消息？

Show different message on Password validation in Vuetify?

vue.js

vue-component

vuejs2

nuxt.js

vuetify.js