Vue.jsサンプルコード（31）パスワードの強度をバーで表現する

• 前記事: 30. パスワードを自動生成する
• 次記事: 32. 郵便番号に対応する地図を表示する

31. パスワードの強度をバーで表現する

• Vue.jsバージョン: 2.5.2
• [パスワード]フィールドにパスワードを入力すると、強度を判定してバーを伸ばします。
• パスワードの文字数8文字以上、英小文字、英大文字、記号、数字の使用について20%ずつ配点しています。
• パスワードは隠していません。
• 画面をリロードすると最初の状態に戻ります。

サンプルコード

ポイント

このような場合はwatchよりcomputed（第1回参照）を使うことをおすすめします。

  const vm = new Vue({
    el: "#app",
    data: {p: ""},
    computed: {
      s: function() {
        let s = 0
        s += /.{8,}/.test(this.p) ? 20 : 0
        s += /\d/.test(this.p)    ? 20 : 0
        s += /[a-z]/.test(this.p) ? 20 : 0
        s += /[A-Z]/.test(this.p) ? 20 : 0        
        s += /[#!&]/.test(this.p) ? 20 : 0
        return s
      },
    },
  })

• 前記事: 30. パスワードを自動生成する
• 次記事: 32. 郵便番号に対応する地図を表示する

バックナンバー（Vue.jsサンプルコード）

Vue.jsサンプルコード（01〜03）Hello World・簡単な導入方法・デバッグ・結果の表示とメモ化

• Vue.jsサンプルコード（04）双方向データバインディングを使ってみる
• Vue.jsサンプルコード（05）複数のinputに同じ変数を割り当てる
• Vue.jsサンプルコード（06）合計金額をリアルタイムに表示する
• Vue.jsサンプルコード（07）入力文字数をリアルタイムにプレビューする
• Vue.jsサンプルコード（08）入力したカラーコードをリアルタイムでプレビューする
• Vue.jsサンプルコード（09）カラーピッカーで選択した色を動的に表示する
• Vue.jsサンプルコード（10）スライダーで入力したカラーコードを動的に表示する
• Vue.jsサンプルコード（11）ラベルをクリックして表示開閉とラベル変更を行う
• Vue.jsサンプルコード（12）特定の単語を入力したらボタンを無効にする
• Vue.jsサンプルコード（13）「承認」チェックボックスをオンにしないと「送信」ボタンを押せないようにする
• Vue.jsサンプルコード（14）「承認」ボタンを押したら解除できないようにする
• Vue.jsサンプルコード（15）パスワードのマスクを解除する
• Vue.jsサンプルコード（16）パスワードを入力中だけ表示する
• Vue.jsサンプルコード（17）[いいね]ボタンを押すとボタンが文言に変わる
• Vue.jsサンプルコード（18）スター[★]を1回だけ押せるようにする
• Vue.jsサンプルコード（19）文字をクリックすると編集できるようにする
• Vue.jsサンプルコード（20）スター[★★★☆☆]をクリックして数値を1桁だけ入力する
• Vue.jsサンプルコード（21）[はい][いいえ]ボタンを押すと表示を変える
• Vue.jsサンプルコード（22）YouTube風の[👆][👇]ボタンで1度だけGood/Bad評価する
• Vue.jsサンプルコード（23）テキストフィールドの行数に応じて縦幅を自動拡張する
• Vue.jsサンプルコード（24）テキストフィールドの文章量に応じて縦幅を自動拡張する
• Vue.jsサンプルコード（25）クイズの答えをダイアログに入力しないと送信できないようにする
• Vue.jsサンプルコード（26）多数のアンケートを同一画面で順に表示する
• Vue.jsサンプルコード（27）選択肢に応じて入力項目を切り替える
• Vue.jsサンプルコード（28）文字の大きさをボタンで変更する
• Vue.jsサンプルコード（29）フィールドごとに全角英数字入力と半角英数字入力を自動で切り替える
• Vue.jsサンプルコード（30）パスワードを自動生成する