InputManJS/JavaScript

バリデーションチェックを手軽に実装！V5Jで追加されたInputManJSの新しい検証規則の使い方

by MESCIUS-dev

日本仕様の入力用JavaScriptコントロールセット「InputManJS（インプットマンJS）」の「V5J」では、InputManJSの各コントロールにバリデーションチェック機能を簡単に追加できるGcValidator（検証）コントロールに新しい検証規則が追加されています。この記事では、パスワードを変更するダイアログを例にして、これらの新しい機能を利用する方法を紹介します。

新しい検証規則を実装したフォーム画面

開発環境の準備とInputManJSの参照

今回は開発環境として以下を使用します。

作成するファイルは以下の3つです。

index.htmlページ本体。ページの要素としてGcTextBoxとGcValidatorを配置します
app.jsGcTextBoxとGcValidatorを作成するコードを記載します
style.cssこのサンプルで使用する各要素のスタイル設定を行うためのコードを設定します

GcTextBoxコントロールとGcValidatorコントロールを使用するには、InputManJSのモジュールを環境にインストールする必要があります。CDNを参照したり、npmなどから入手したりする方法もありますが、今回は環境に直接モジュールを配置していきます。あらかじめInputManJSの製品版かトライアル版をご用意ください。トライアル版は以下より無償で入手可能です。

製品版、またはトライアル版をダウンロードしたら、ZIPファイルを解凍し、以下のファイルを環境にコピーします。

  • css/gc.inputman-js.css
  • scripts/gc.inputman-js.ja.js

InputManJSライブラリの参照設定をHTMLファイルに追加します。InputManJSのモジュールに加えて、上記の「app.js」、「style.css」への参照も追加します。
※ CDNから参照する場合はコメントアウトされている部分とライブラリの参照先を入れ替えてください。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>InputManJSの既定の検証規則</title>

    <!-- ローカルのライブラリを参照する場合 -->
    <link rel="stylesheet" href="css/gc.inputman-js.css" />
    <script src="scripts/gc.inputman-js.ja.js"></script>

    <!-- CDNからライブラリを参照する場合 -->
    <!-- <link rel="stylesheet" href="https://cdn.mescius.com/inputmanjs/hosted/css/gc.inputman-js.css">
    <script src="https://cdn.mescius.com/inputmanjs/hosted/scripts/gc.inputman-js.ja.js"></script> -->

    <link rel="stylesheet" href="css/style.css" />
    <script src="scripts/app.js"></script>
</head>
<body>
    <div class="main">
        <h2>パスワードの変更</h2>
        <div class="item">
            <label>登録されているメールアドレス</label><br>
            <input id="gcTextBox1">
            <button type="button" id="confirm">確認</button>
        </div>
        <div class="item">
            <label>新しいパスワード</label><br>
            <input id="gcTextBox2"><br>
            <div class="restriction">
                ※ 12文字以上20文字以下で英大文字、英小文字、数字、記号（!@#$%）の<br>
                　 すべての文字種を含めてください
            </div>
        </div>
        <div class="item">
            <label>新しいパスワード（確認）</label><br>
            <input id="gcTextBox3">
        </div>
        <button id="register">新しいパスワードに変更</button>
    </div>
</body>
</html>

「app.js」と「style.css」は次のとおりです。今回は3種類の新しい検証規則を使用するので、それにあわせてテキストコントロールも3つ生成します（コード中の省略箇所は後述します）。
※ ライセンスキーを設定しない場合トライアル版を示すメッセージが表示されます。ライセンスキーの入手や設定方法についてはこちらをご覧ください。

// ライセンスキーの設定
// GC.InputMan.LicenseKey = 'ここにInputManJSのライセンスキーを設定します';

var gcTextBox1;
var gcTextBox2;
var gcTextBox3;
var validator;
var address = ['aaa@example.com','bbb@example.com','ccc@example.com'];
var regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%])[a-zA-Z0-9!@#\$%]+$/;

document.addEventListener('DOMContentLoaded', () => {
    // InputManJSコントロールのデザインの指定
    GC.InputMan.appearanceStyle = GC.InputMan.AppearanceStyle.Modern;

    // GcTextBoxコントロールの生成
    setGcTextBoxControls();

    // GcValidatorの生成
    setGcValidator();

    // アドレスが登録されているか確認
    document.querySelector('#confirm').addEventListener('click', (e) => {
        const isValidAddress = address.includes(gcTextBox1.getText());
        validator.validate(gcTextBox1, isValidAddress);
    });

    // すべての入力内容の確認
    document.querySelector('#register').addEventListener('click', (e) => {
        const check1 = validator.validate();
        const isValidAddress = address.includes(gcTextBox1.getText());
        const check2 = validator.validate(gcTextBox1, isValidAddress);
        if(check1 && check2){
            alert('新しいパスワードが登録されました');
        }else{
            alert('入力内容に不備があります');
        }
    });
});

// GcTextBoxコントロールの生成
function setGcTextBoxControls() {
    // gcTextBox1
    ・・・ 中略 ・・・
    // gcTextBox2
    ・・・ 中略 ・・・
    // gcTextBox3
    ・・・ 中略 ・・・
}

// GcValidatorの生成
function setGcValidator(){
    validator = new GC.InputMan.GcValidator({
        items: [
            // gcTextBox1の検証
            ・・・ 中略 ・・・
            // gcTextBox2の検証
            ・・・ 中略 ・・・
            // gcTextBox3の検証
            ・・・ 中略 ・・・
         ],
         defaultNotify: {
            fail: {
                tip: {
                    style: 'flatpanel',
                    direction: 'bottom',
                    position: 'start'
                }
            },
            success: {
                tip: {
                    style: 'flatpanel',
                    direction: 'bottom',
                    position: 'start'
                }
            },
        }    
    });
}
/* 検証コントロールの幅 */
[gcim-control-appearance="modern"] .gcim-notify__tip-container {
    width: 360px;
}

/* InputManJS以外のスタイル */
h2 {
    text-align: center
}
.restriction{
    color: blue;
    font-size: x-small;
    line-height: 120%;
    margin-top: 10px;
}
.main {
    border: 1px solid silver;
    padding-bottom: 30px;
    margin-bottom: 10px;
    width: 500px;
}
.item {
    padding-left: 35px;
    margin-bottom: 20px;
}
#confirm {
    margin-left: 10px;
    height: 30px;
    width: 60px;
}
#register {
    display: block;
    margin-inline: auto;
    margin-top: 30px;
    height: 40px;
    width: 180px;
}

GcTextBoxコントロールとGcValidatorコントロールの作成

それではGcValidatorコントロールの新しい検証規則を使ったサンプルを作成していきます。ここでは、入力コントロールとしてGcTextBoxコントロールを使います。これらのコントロールの詳細については、デモとAPIリファレンスをご参照いただければと思います。

作成するサンプルの概要

今回作成するのは、下記のようなパスワードを変更するダイアログです。ログオンなどの操作は完了していることを前提としています。

パスワード変更ダイアログ

各入力領域では、「V5J」で追加された次の新しい検証規則を使用します。また、従来からある「必須入力」や「カスタム検証」の検証規則も組み合わせることで、適切なパスワードが入力されたかどうかを検証します。

項目使用している新しい検証規則
登録されているメールアドレス外部検証結果を使う検証規則
新しいパスワード入力文字数を制限する検証規則
新しいパスワード（確認）他のコントロールと照合する検証規則

外部検証結果を使う検証規則

この検証規則は「登録されているメールアドレス」を入力するgcTextBox1コントロールを対象としています。［確認］ボタンがクリックされたときに、入力されたメールアドレスが内部のリストに含まれているかどうかを検証します。この検証は、GcValidatorコントロールのコンストラクタではなく、GcValidatorコントロールのValidateメソッドの第2引数に実装します。

前述の「app.js」で省略していたgcTextBox1コントロールのコンストラクタは次のようになります。

・・・（中略）・・・
// gcTextBox1
gcTextBox1 = new GC.InputMan.GcTextBox(
    document.getElementById('gcTextBox1'), {
    format: 'Aa9@',
    showHelpButton: true,
    helpContent: '登録済メールアドレス：\r\n' +
        '(1) aaa@example.com\r\n(2) bbb@example.com\r\n(3) ccc@example.com',
    width: 360
});
・・・（中略）・・・

上記のshowHelpButtonプロパティとhelpContentプロパティは、サンプルの動作確認をするときに「登録されているメールアドレス」が分かるようにするもので、検証機能の動作に影響するものではありませんが、UXの改善に役立ちます。

GcValidatorコントロールのコンストラクタ内の「gcTextBox1の検証」に関する部分は次のように記述します。今回は必須入力チェックのほか、外部検証機能を使って登録済みのメールアドレスかどうかのチェック行います。正しいメールアドレスの書式かどうかチェックしたい場合はこちらのデモをご参考ください。

・・・（中略）・・・
// gcTextBox1の検証
{
    control: gcTextBox1,
    ruleSet: [
        // 必須入力
        {
            rule: GC.InputMan.ValidateType.Required,
            failMessage: 'メールアドレスが入力されていません',
         },
        //【新機能】：外部検証
        {
            rule: GC.InputMan.ValidateType.External,
            failMessage: '登録されていないメールアドレスです',
            successMessage: '登録されたメールアドレスです'
        },
    ],
    validateWhen: GC.InputMan.ValidateWhen.Manual
},
・・・（中略）・・・

ここでは、外部検証を行うためにValidateItemインターフェイスのruleSetプロパティが参照するValidateRuleItemインターフェイスのruleプロパティにValidateType列挙型のGC.InputMan.ValidateType.Externalを設定しています。また、外部のイベントで検証を行うためにValidateItemインターフェイスのvalidateWhenプロパティにValidateWhen列挙型のGC.InputMan.ValidateWhen.Manualを設定しておきます。

登録済みのメールアドレスのリストは、配列変数をつかって次のように設定します。

・・・（中略）・・・
var address = ['aaa@example.com','bbb@example.com','ccc@example.com']; 
・・・（中略）・・・

実際の検証動作は、下記のclickイベントに実装します。

・・・（中略）・・・
// アドレスが登録されているか確認
document.querySelector('#confirm').addEventListener('click', (e) => {
    const isValidAddress = address.includes(gcTextBox1.getText());
    validator.validate(gcTextBox1, isValidAddress);
});
・・・（中略）・・・

登録されていないメールアドレスを入力して［確認］ボタンをクリックした後に、登録済みのメースアドレスを入力して再度［確認］ボタンをクリックした際の様子を以下に示します。

入力文字数を制限する検証規則

入力文字数を制御する検証規則は「新しいパスワード」を入力するgcTextBox2コントロールを対象としています。gcTextBox2コントロールがフォーカスを失ったときに、入力されたパスワードが12文字以上、20文字以下になっているか検証します。

また、従来からある「カスタム検証規則」を使って、パスワードに「英大文字、英小文字、数字、記号（!@#$%）」のすべての文字種が含まれているかどうかを判別します。

gcTextBox2コントロールのコンストラクタは次のようになります。

・・・（中略）・・・
// gcTextBox2
gcTextBox2 = new GC.InputMan.GcTextBox(
    document.getElementById('gcTextBox2'), {
    format: 'Aa9@',
    passwordRevelationMode: GC.InputMan.PasswordRevelationMode.ShowLastTypedChar,
    useSystemPasswordChar: true,
    width: 360
});
・・・（中略）・・・

入力時に直前に入力した文字を確認できるようにpasswordRevelationModeプロパティをGC.InputMan.PasswordRevelationMode.ShowLastTypedCharに設定しています。また、useSystemPasswordCharプロパティをtrueに設定して、パスワードを隠すための文字としてシステムに設定されている文字を使用します。

GcValidatorコントロールのコンストラクタ内の「gcTextBox2の検証」に関する部分は次のように記述します。

・・・（中略）・・・
var regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%])[a-zA-Z0-9!@#\$%]+$/;
・・・（中略）・・・
// gcTextBox2の検証
{
    control: gcTextBox2,
    ruleSet: [
        //【新機能】：入力文字数
        {
            rule: GC.InputMan.ValidateType.BetweenOrEqualToMinAndMaxLength,
            inputMinLength: 12,
            inputMaxLength: 20,
            failMessage: '文字数は12文字から20文字までにしてください',
            successMessage: '適切な文字数です'
        },
        // カスタム検証規則：正規表現を使った文字種の確認
        {
            rule: (control) => {
                return regex.test(control.getText());
            },
            failMessage: '英大文字・英小文字・数字・記号（!@#$%）' +
                'のすべての文字種を含めてください',
            successMessage: '適切なパスワードが入力されました'
        }
    ],
    validateWhen: GC.InputMan.ValidateWhen.Lostfocus
},
・・・（中略）・・・

ここでは、入力文字数の検証を行うためにruleSetのruleプロパティに GC.InputMan.ValidateType.BetweenOrEqualToMinAndMaxLengthを設定しています。文字数の最小値と最大値は、それぞれinputMinLengthプロパティとinputMaxLengthプロパティで設定します。

さらに、文字種を指定して安全なパスワードのみを許可するために、正規表現を使ったカスタム検証規則も設定しています。

また、gcTextBox2コントロールがフォーカスを失ったときに検証が行われるようにvalidateWhenプロパティをGC.InputMan.ValidateWhen.Lostfocusに設定します。

以上を実装して、次の操作を行ったときのようすを下に示します。

  1. 不正な文字数のパスワードを入力してフォーカスを移動
  2. 適切な文字数のパスワードを入力してフォーカスを移動
  3. 要求されているすべての文字種を含んだパスワードを入力してフォーカスを移動

他のコントロールと照合する検証規則

他のコントロールと照合する検証規則は「新しいパスワード（確認）」を入力するgcTextBox3コントロールを対象としています。gcTextBox3コントロールに文字が入力されるたびに、入力値がgcTextBox2コントロールに入力された値に合致するか検証します。

また、従来からある「必須入力検証規則」を使って。「パスワード（確認）」欄が未入力になっていないか判別します。

gcTextBox3コントロールのコンストラクタは次のようになります。gcTextBox3コントロールの設定は、gcTextBox2コントロールと同じです。

・・・（中略）・・・
// gcTextBox3
gcTextBox3 = new GC.InputMan.GcTextBox(
    document.getElementById('gcTextBox3'), {
    format: 'Aa9@',
    passwordRevelationMode: GC.InputMan.PasswordRevelationMode.ShowLastTypedChar,
    useSystemPasswordChar: true,
    width: 360
});
・・・（中略）・・・

GcValidatorコントロールのコンストラクタ内の「gcTextBox3の検証」に関する部分は次のように記述します。

・・・（中略）・・・
{
    control: gcTextBox3,
    ruleSet: [
        // 必須入力
        {
            rule: GC.InputMan.ValidateType.Required,
            failMessage: 'パスワードが入力されていません',
        },
        //【新機能】：他のコントロールと照合
        {
            rule: GC.InputMan.ValidateType.MatchControl,
            matchControl: gcTextBox2,
            failMessage: 'パスワードが一致しません',
            successMessage: 'パスワードが一致しました'
        }
    ],
    validateWhen: GC.InputMan.ValidateWhen.Typing
}
・・・（中略）・・・

ここでは、最初に未入力を判別する「必須入力検証規則」のValidateRuleItemを設定し、その後で入力されたパスワードが前項目の「新しいパスワード」に入力された文字列に等しいことを検証する「他のコントロールと照合する検証規則」のValidateRuleItemを設定します。

各ValidateRuleItemのruleプロパティは、それぞれ次のように設定します。

検証規則設定値
必須入力検証規則GC.InputMan.ValidateType.Required
他のコントロールと照合する検証規則GC.InputMan.ValidateType.MatchControl

また、文字が入力されるたびに検証が行われるようにvalidateWhenプロパティにGC.InputMan.ValidateWhen.Typingを設定します。

以上を実装して、gcTextBox3コントロールに正しいパスワードを入力するときのようすを下に示します。

上記のすべての実装を行ってすべての項目に正しい文字列を入力した後に［新しいパスワードに変更］ボタンをクリックすると、次のようになります。

コンボコントロールでツリービュー表示

今回ご紹介したGcValidatorコントロールの新しい検証規則の機能は以下のデモアプリケーションでも確認できます（“Run Project”をクリックするとデモが起動します）。

さいごに

今回の記事では、「InputManJS」に含まれるGcValidatorコントロールの既定の検証規則を使用する方法について「V5J」で追加された新しい検証規則にフォーカスしてご紹介しました。

InputManJSは、リッチテキスト、テキスト、マスク、日付時刻、数値、コンボなど用途別に最適化された入力用コントロールを収録したJavaScript製品です。Webアプリケーションにおけるストレスフリーのきめ細かい入力フォームの開発に、ぜひInputManJSをご検討いただければと思います。

製品サイトでは、InputManJSの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼  この記事をシェアする  ／