Tech Racho エンジニアの「?」を「!」に。
  • 開発

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

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
      },
    },
  })

バックナンバー(Vue.jsサンプルコード)

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

CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。