vanilla js_用Vanilla JS编写的简单密码检查器组件

vanilla js

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

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

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

安装 (Install)

npm install vue-simple-password-meter

npm install vue-simple-password-meter

用法 (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;
}

动机 (Motivation)

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

由于其他大多数组件和库都主要使用zxcvbn，因此压缩后的大小为799.5kb， 压缩后的大小为388.3kb，因此我决定简化程序并使用regex而不是字典进行验证。

翻译自: https://vuejsexamples.com/a-simple-password-checker-component-written-in-vanilla-js/

vanilla js