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



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部