<!--
|
* @Descripttion: 密码强度检测
|
* @version: 1.0
|
* @Author: sakuya
|
* @Date: 2022年6月2日15:36:01
|
* @LastEditors:
|
* @LastEditTime:
|
-->
|
|
<template>
|
<div class="sc-password-strength">
|
<div class="sc-password-strength-bar" :class="`sc-password-strength-level-${level}`"></div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
modelValue: { type: String, default: "" },
|
},
|
data() {
|
return {
|
level: 0
|
}
|
},
|
watch: {
|
modelValue() {
|
this.strength(this.modelValue)
|
}
|
},
|
mounted() {
|
this.strength(this.modelValue)
|
},
|
methods: {
|
strength(v){
|
var _level = 0
|
//长度
|
var has_length = v.length >= 6
|
//包含数字
|
var has_number = /\d/.test(v)
|
//包含小写英文
|
var has_lovercase = /[a-z]/.test(v)
|
//包含大写英文
|
var has_uppercase = /[A-Z]/.test(v)
|
//没有连续的字符3位
|
var no_continuity = !/(\w)\1{2}/.test(v)
|
//包含特殊字符
|
var has_special = /[`~!@#$%^&*()_+<>?:"{},./;'[\]]/.test(v)
|
|
if(v.length <= 0){
|
_level = 0
|
this.level = _level
|
return false
|
}
|
if(!has_length){
|
_level = 1
|
this.level = _level
|
return false
|
}
|
if(has_number){
|
_level += 1
|
}
|
if(has_lovercase){
|
_level += 1
|
}
|
if(has_uppercase){
|
_level += 1
|
}
|
if(no_continuity){
|
_level += 1
|
}
|
if(has_special){
|
_level += 1
|
}
|
this.level = _level
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.sc-password-strength {height: 5px;width: 100%;background: var(--el-color-info-light-5);border-radius: 5px;position: relative;margin:10px 0;}
|
.sc-password-strength:before {left: 20%;}
|
.sc-password-strength:after {right: 20%;}
|
.sc-password-strength:before, .sc-password-strength:after {position: absolute;content: "";display: block;width: 20%;height: inherit;border: 5px solid var(--el-bg-color-overlay);border-top: 0;border-bottom: 0;z-index: 1;background-color: transparent;box-sizing: border-box;}
|
.sc-password-strength-bar {position: absolute;height: inherit;width: 0%;border-radius: inherit;transition: width .5s ease-in-out,background .25s;background: transparent;}
|
.sc-password-strength-level-1 {width: 20%;background-color: var(--el-color-error);}
|
.sc-password-strength-level-2 {width: 40%;background-color: var(--el-color-error);}
|
.sc-password-strength-level-3 {width: 60%;background-color: var(--el-color-warning);}
|
.sc-password-strength-level-4 {width: 80%;background-color: var(--el-color-success);}
|
.sc-password-strength-level-5 {width: 100%;background-color: var(--el-color-success);}
|
</style>
|
