vue-password-strength-meter | 一款基于vuejs的密码强度检查组件

vue-password-strength-meter是一款基于vuejs的密码强度检查组件。用于检查用户输入的密码是否足够安全。

它底层使用zxcvbn。zxcvbn使用模式匹配和保守估计的方法，根据美国人口普查数据中的常见姓名和姓氏、维基百科和美国电视和电影中的常见英语单词，以及日期、重复（aaa）、序列（abcd）、键盘模式（qwertyuiop）和l33t语言等其他常见模式来识别和权衡3万个常见密码。其中一些技术术语包括密码强度估算器、模式匹配、保守估计、美国人口普查数据、l33t语言等。

使用方法

安装

如果您想使用该密码强度检查组件，首先您需要安装它，命令如下：

npm install vue-password-strength-meter zxcvbn
// 或者
yarn add vue-password-strength-meter zxcvbn
		

使用

基本使用

<template>
  <password v-model="password"/>
</template>

import Password from 'vue-password-strength-meter'
export default {
	components: { Password },
	data: () =>; ({
	  password: null
	})
}
		

定义事件

<template>
  <password
    v-model="password"
    :toggle="true"
    @score="showScore"
    @feedback="showFeedback"
  />
</template>

import Password from 'vue-password-strength-meter'
export default {
  components: { Password },
  data: () => ({
    password: null
  }),
  methods: {
    showFeedback ({suggestions, warning}) {
      console.log(suggestions)
      console.log(warning)
    },
    showScore (score) {
      console.log(score)
    }
  }
}
    

自定义输入框

<template>
  <div>
    <input type="password" v-model="password">
    <password v-model="password" :strength-meter-only="true"/>
  </div>
</template>

import Password from 'vue-password-strength-meter'
export default {
	components: { Password },
	data: () => ({
	  password: null
	})
}
    

配置参数

该密码强度检查组件的可用配置参数如下：

• secureLength: 密码最小长度，类型为数字。
• badge: 布尔值，表示是否显示密码计数徽章。
• toggle: 布尔值，表示是否显示切换密码可见性的按钮。
• showPassword: 布尔值，如果您不使用切换按钮，可以直接使用此属性显示/隐藏密码。
• defaultClass: 字符串，表示输入框的默认类。
• disabledClass: 字符串，表示禁用输入框时的类。
• errorClass: 字符串，表示密码计数徽章的错误类。
• successClass: 字符串，表示密码计数徽章的成功类。
• strengthMeterClass: 字符串，表示强度计量器的类。
• strengthMeterFillClass: 字符串，表示单个数据填充的强度计量器类。
• showStrengthMeter: 布尔值，如果您想要实现自己的强度计量器，则可以隐藏它。
• strengthMeterOnly: 布尔值，如果您想要实现自己的输入框，则可以隐藏内置输入框。
• labelHide: 字符串，表示隐藏图标的标签。
• labelShow: 字符串，表示显示图标的标签。
• userInputs: 数组，其中包含zxcvbn将视为额外字典的字符串数组。
• referenceValue: 字符串，用于更改输入引用。这样您可以将输入框放在组件外部。

事件

该密码强度检查组件的可用事件如下：

• @show: 如果显示密码，则会触发此事件。
• @hide: 如果隐藏密码，则会触发此事件。
• @score: 返回zxcvbn评分（0-4之间的整数）的属性。zxcvbn是一个密码强度评估库，用于检查密码的强度。
• @feedback: 返回一个zxcvbn反馈对象，其中包含建议和警告。

这些事件可以用于监测用户的密码输入，并根据密码的强度提供反馈。

github网址：https://github.com/apertureless/vue-password-strength-meter