screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <h1>Vue js Password Strength Checker</h1> <div id="app"> <label for="password">Enter password:</label> <input type="password" id="password" v-model="password" @keyup="checkPasswordStrength" placeholder="Password"> <div class="password-strength" :class="{'weak': passwordStrength === 'Weak', 'medium': passwordStrength === 'Medium', 'strong': passwordStrength === 'Strong'}"> {{ passwordStrength }} </div> </div> <script> var app = new Vue({ el: '#app', data: { password: '', passwordStrength: '', }, methods: { checkPasswordStrength: function () { var password = this.password; if (password.length < 8) { this.passwordStrength = 'Weak'; } else if (password.match(/[a-z]/) && password.match(/[A-Z]/) && password.match(/[0-9]/) && password.match(/.[!,%,&,@,#,$,^,*,?,_,~]/)) { this.passwordStrength = 'Strong'; } else { this.passwordStrength = 'Medium'; } } } }); </script> <style scoped> /* Styles for the password strength meter */ .password-strength { margin-top: 5px; padding: 5px; font-weight: bold; text-align: center; border-radius: 4px; color: #fff; width: 200px; transition: all 0.2s ease-in-out; } /* Styles for the weak password strength state */ .password-strength.weak { background-color: #e74c3c; } /* Styles for the medium password strength state */ .password-strength.medium { background-color: #f1c40f; } /* Styles for the strong password strength state */ .password-strength.strong { background-color: #2ecc71; } </style> </body> </html>