vue PasswordStrength密码强度组件

PasswordStrength 密码强度

用于登录等表单中检验用户输入的密码强度。

代码示例

基础用法

<password-strength :password="password">password-strength>
1

props

events

组件源码

<template>
    <div class="password-strength">
        <div class="password-strength-tip">
            密码强度：<b>{{ strength === 3 ? '高' : (strength === 2 ? '中' : '低') }}b><span v-show="strength === 2">（推荐）span>
        div>
        <ul class="password-strength-bar">
            <li :class="{ active: strength >= 1 }">li>
            <li :class="{ active: strength >= 2 }">li>
            <li :class="{ active: strength === 3 }">li>
        ul>
    div>
template>

<script>
export default {
    name: 'password-strength',
    props: {
        password: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            strength: 0
        }
    },
    watch: {
        password: {
            handler(newVal) {
                if (!newVal) {
                    this.strength = 0
                    this.$emit('on-change', this.strength)
                    return
                } else if (newVal.length < 8) {
                    this.strength = 1
                    this.$emit('on-change', this.strength)
                    return
                }
                let hasNum = 0
                let hasWord = 0
                let hasSpecChar = 0
                for (let i = 0; i < newVal.length; i++) {
                    if (hasNum === 0 && /[0-9]/.test(newVal[i])) {
                        hasNum++
                    } else if (hasWord === 0 && /[a-zA-Z]/.test(newVal[i])) {
                        hasWord++
                    } else if (hasSpecChar === 0 && /[@#￥!^&*()]/.test(newVal[i])) {
                        hasSpecChar++
                    }
                }
                if (hasNum + hasWord + hasSpecChar < 2) {
                    this.strength = 1
                } else if (hasNum + hasWord + hasSpecChar === 2) {
                    this.strength = 2
                } else if (hasNum + hasWord + hasSpecChar === 3) {
                    this.strength = 3
                }
                this.$emit('on-change', this.strength)
            }
        }
    }
}
script>

<style scoped lang="scss">
    .password-strength {
        width: 100%;
        margin-bottom: 16px;
        .password-strength-tip {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            font-size: 12px;
            span {
                color: #666;
            }
        }
        .password-strength-bar {
            display: flex;
            li {
                flex: 1;
                height: 4px;
                border-radius: 4px;
                opacity: .2;
                transition: all .2s linear;
                & + li {
                    margin-left: 2px;
                }
                &.active {
                    opacity: 1;
                }
                &:first-child {
                    background: #FF0000;
                }
                &:nth-child(2) {
                    background: #FF7200;
                }
                &:last-child {
                    background: #3FD662;
                }
            }
        }
    }
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106