vue 密码组件_Vue Simple Password Meter是一个简单的密码强度计组件

vue 密码组件

简易密码表 (vue-simple-password-meter)

Vue Simple Passwod Meter is a simple password checker written in vanilla js and extremly lightweight (3.2kb minified + Gzipped)

Vue Simple Passwod Meter是使用Vanilla js编写的简单密码检查器，并且极其轻巧(压缩后的大小为3.2kb + Gzipped)

View Demo 查看演示 View Github 查看Github

安装 (Install)

npm install vue-simple-password-meter --save

npm install vue-simple-password-meter --save

用法 (Usage)

Simply use v-model and send it to the component using password prop

只需使用v-model并使用密码prop将其发送到组件

<template>
  <form>
    <label for="password">Password</label>
    <input id="password" type="password" v-model="passwordValue" />
    <password-meter :password="passwordValue" />
  </form>
</template>

<script>
import passwordMeter from "vue-simple-password-meter";

export default {
  components: { passwordMeter },
  data: () => ({
    passwordValue: null
  })
};
</script>

使用CSS自定义 (Customize using css)

If you wanna customize the bar its really simple with some easy css you can customize it

如果您想使用一些简单CSS来自定义条形图，则非常简单，您可以自定义它

Overwrite these css styles globally and change each state color and style

全局覆盖这些CSS样式，并更改每个状态的颜色和样式

.po-password-strength-bar {
  border-radius: 2px;
  transition: all 0.2s linear;
  height: 5px;
  margin-top: 8px;
}

.po-password-strength-bar.risky {
  background-color: #f95e68;
}

.po-password-strength-bar.guessable {
  background-color: #fb964d;
}

.po-password-strength-bar.weak {
  background-color: #fdd244;
}

.po-password-strength-bar.safe {
  background-color: #b0dc53;
}

.po-password-strength-bar.secure {
  background-color: #35cc62;
}

大事记 (Events)

You can use event score to use scored number between 0 to 4 that scores password from risky to secure with 4 is a secure password and 0 is risky and between.

您可以使用事件score来使用介于0到4之间的评分数字，该评分分数将密码从风险级别转换为安全级别，其中4为安全密码，0为风险级别。

You can use this as a form verification tool

您可以将其用作表单验证工具

See below example for more detail

请参阅下面的示例以获取更多详细信息

<template>
  <form>
    <label for="password">Password</label>
    <input id="password" type="password" v-model="passwordValue" />
    <span v-if="score === 0">Use better password</span>

    <password-meter :password="passwordValue" @score="onScore" />
  </form>
</template>

<script>
import passwordMeter from "vue-simple-password-meter";

export default {
  components: { passwordMeter },
  data: () => ({
    passwordValue: null,
    score: null
  }),
  methods: {
    onScore({ score, strength }) {
      console.log(score); // from 0 to 4
      console.log(strength); // one of : 'risky', 'guessable', 'weak', 'safe' , 'secure' 
      this.score = score;
    }
  }
};
</script>

贡献 (Contributing)

If you want to contribute to this project simply fork it and clone it then run npm i in the root of the project, then run npm run serve to run development server.

如果您想对此项目做出贡献，只需对其进行分叉并克隆它，然后在项目的根目录中运行npm i ，然后运行npm run serve即可运行开发服务器。

动机 (Motivation)

Since Every other components and libraries mostly were using zxcvbn was 799.5kb minified and 388.3kb minified and Gzipped so i decided to make simpler approach and use regex instead of dictionary for validating.

由于其他所有组件和库都主要使用zxcvbn，因此最小化了799.5kb，最小化和压缩了388.3kb，因此我决定采用更简单的方法，并使用regex代替字典进行验证。

翻译自: https://vuejsexamples.com/vue-simple-password-meter-is-a-simple-password-strength-meter-component/

vue 密码组件