用 Vue 寫一個密碼強度計

<div id="app">
  <input type="password" v-model="password">
  <p>{{ strength }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<script>
  const vm = new Vue({
    el: '#app',

    data: {
      password: '',
    },

    computed: {
      strength() {
        let score = this.password.length;

        // 包含大寫 A-Z
        if (/[A-Z]/.test(this.password)) score *= 1.25;

        // 包含小寫 a-z
        if (/[a-z]/.test(this.password)) score *= 1.25;

        // 包含數字 0-9
        if (/[0-9]/.test(this.password)) score *= 1.25;

        // 包含不是大寫 A-Z、小寫 a-z、數字 0-9 的字元
        if (/[^A-Za-z0-9]/.test(this.password)) score *= 1.25;

        // 密碼夠長夠完美
        if (score > 40) return 'Perfect';

        if (score > 20) return 'Great';

        if (score > 10) return 'Good';

        return 'weak';
      },
    },
  });
</script>