JavaScript - Functions(Password Strength Indicator)

Exercises for Programmers

開発環境

• OS X El Capitan - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• Safari(Web browser)
• JavaScript 第6版 (David Flanagan(著)、村上 列(翻訳)、オライリージャパン)(参考書籍)
• JavaScriptリファレンス 第6版(David Flanagan(著)、木下 哲也(翻訳)、オライリージャパン)(参考書籍)

Exercises for Programmers: 57 Challenges to Develop Your Coding Skills (Brian P. Hogan 著、Pragmatic Bookshelf)のChapter 5(Functions)、25(Password Strength Indicator)を取り組んでみる。

25(Password Strength Indicator)

コード(Emacs)

<p>
  <label for="password0">
    The password
    <input id="password0" type="password" value="12345">
    is a <span id="output0"></span> password.
</p>
<script src="sample25.js"></script>

(function () {
    'use strict';
    var strengths = ['very strong', 'strong', 'weak', 'very weak'],

        input_password = document.querySelector('#password0'),
        span_output = document.querySelector('#output0'),

        passwordValidator,
        output;

    passwordValidator = function (password) {
        var len = password.length;

        if (len >= 8 && /[^a-zA-Z0-9]/.test(password) &&
            /\d/.test(password) && /[a-zA-Z]/.test(password)) {
            return 0;
        }
        if (len >= 8 && /\d/.test(password)) {
            return 1;
        }
        if (len < 8 && /[a-zA-Z]/.test(password)) {
            return 2;
        }
        return 3;
    }
    output = function () {
        var password = input_password.value;

        span_output.innerText = strengths[passwordValidator(password)];
    };

    output();

    input_password.onkeyup = output;
}())

The password is a password.