Snippet revisions — Bitbucket

+<!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>

Snippets

Duane Blake Vue Password Strength Indicator

File Index.html Added