Snippets

Duane Blake Vue Password Strength Indicator

Created by Duane Blake
Index.html
Raw 
 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue Password Strength Indicator</title>
    <link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet" />
    <style>
        body{background-color: #EFEFEF;}
        .container{width:400px; margin:50px auto; background: white; padding:10px; font-family: Arial, Helvetica, sans-serif, sans-serif; border-radius: 3px;}
        h1{ font-size: 24px; text-align: center; text-transform: uppercase;}
        .frmField{background-color:white; color:#495057; line-height: 1.25; font-size: 16px; font-family: 'Roboto', sans-serif; border:0; padding: 10px; border:1px solid #dbdbdb;  border-radius: 3px; width:90%;}
        .frmLabel{display: block; margin-bottom: 10px; font-weight: bold;}
        .frmValidation{font-size: 13px; }
        .frmValidation--passed{color:#717b85;}
        .frmIcon{color:#EB0029;}
            .frmValidation--passed .frmIcon{color:#0fa140;}        
    </style>
</head>
<body>
    <div id="app" class="container">
        <h1>Vue Password Strength Indicator</h1>
        <label class="frmLabel" for="password">Password</label>
        <input placeholder="Enter your password" name="password" class="frmField" type="password" @input="password_check" v-model="message" /> 
        <p class="frmValidation" :class="{'frmValidation--passed' : message.length > 7}"><i class="frmIcon fas" :class="message.length > 7 ? 'fa-check' : 'fa-times'"></i> Longer than 7 characters</p>
        <p class="frmValidation" :class="{'frmValidation--passed' :has_uppercase }"><i class="frmIcon fas" :class="has_uppercase ? 'fa-check' : 'fa-times'"></i> Has a capital letter</p>
        <p class="frmValidation" :class="{'frmValidation--passed' :has_lowercase }"><i class="frmIcon fas" :class="has_lowercase ? 'fa-check' : 'fa-times'"></i> Has a lowercase letter</p>
        <p class="frmValidation" :class="{'frmValidation--passed' : has_number }"><i class="frmIcon fas" :class="has_number ? 'fa-check' : 'fa-times'"></i> Has a number</p>
        <p class="frmValidation" :class="{'frmValidation--passed' : has_special }"><i class="frmIcon fas" :class="has_special ? 'fa-check' : 'fa-times'"></i> Has a special character</p>
    </div><!-- #app  -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data:{
                message:       '',
                has_number:    false,
                has_lowercase: false,
                has_uppercase: false,
                has_special:   false,
            },
            methods: {
                password_check: function () {
                    this.has_number    = /\d/.test(this.message);
                    this.has_lowercase = /[a-z]/.test(this.message);
                    this.has_uppercase = /[A-Z]/.test(this.message);
                    this.has_special   = /[!@#\$%\^\&*\)\(+=._-]/.test(this.message);
                }
            },
        });       
    </script>
</body>
</html>

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.