検証規則

検証コントロールが提供する6つの検証規則について解説します。

必須入力検証

コントロールに値が入力されているかどうかを検証するには、既定の検証規則の必須入力を使用できます。値が空の場合は検証に失敗します。

ruleプロパティにValidateType.Requiredを指定すると必須入力チェックを行います。次のサンプルコードは、テキストコントロールに対して必須入力チェックを設定する例です。

var GcValidator1 = new GC.InputMan.GcValidator({
 items: [
    {
      control: gcTextBox1,
      ruleSet: [
        {
          // 検証規則を「必須入力」とする
          rule: GC.InputMan.ValidateType.Required
        }
      ],
      validateWhen: GC.InputMan.ValidateWhen.Typing,
      notify:
      {
        tip:true
      }
    }
  ]
});

入力範囲検証

コントロールの値が最大値と最小値の範囲内に収まっているかどうか検証するには、既定の検証規則の入力範囲を使用できます。範囲外の値が入力された場合は検証に失敗します。

ruleプロパティにValidateType.OutOfRangeを指定すると必須入力チェックを行います。なお、OutOfRangeが有効に動作する入力コントロールは、最大値と最小値を設定可能なコントロール（GcNumber、GcDateTime）のみとなります。また、検証対象コントロールのmaxMinBehaviorプロパティはKeepに設定されている必要があります。

次のサンプルコードは、日付時刻コントロールに対して範囲チェックを設定する例です。

// 日付時刻コントロール
var gcDateTime1 = new GC.InputMan.GcDateTime(document.getElementById('gcDateTime1'));
gcDateTime1.setDisplayFormatPattern('yyyy年M月d日');
gcDateTime1.setFormatPattern('yyyy年M月d日');
gcDateTime1.setValue(new Date(2018, 9, 31));
gcDateTime1.setMinDate(new Date(2018, 0, 1));
gcDateTime1.setMaxDate(new Date(2018, 11, 31));
gcDateTime1.setMaxMinBehavior(GC.InputMan.MaxMinBehavior.Keep);

// 検証コントロール
var GcValidator1 = new GC.InputMan.GcValidator({
 items: [
    {
      control: gcDateTime1,
      ruleSet: [
        {
          // 検証規則を「範囲チェック」とする
          rule: GC.InputMan.ValidateType.OutOfRange,
          failMessage: '日付が範囲外です'
        }
      ],
      notify:
      {
        tip:true
      }
    }
  ]
});

入力文字数検証

コントロールに入力値の長さが設定条件に満たすかどうかを検証するには、入力文字数チェックを使用できます。設定した文字数の条件に満たしていない場合は検証に失敗します。この検証規則が有効に動作する入力コントロールは以下の通りです。

コントロール	検証
GcTextBox	編集状態のテキストを検証します。
GcMultiLineTextBox	編集状態のテキストを検証します。
GcMask	編集状態のテキストを検証しますが、リテラル（例: “____”）は除外します。
GcComboBox	編集状態のテキストを検証します。
GcRichTextEditor	編集状態のテキストを検証します。

設定方法

ValidateType列挙型に以下のメンバーが追加されました。

検証規則	説明	必要パラメータ
EqualToInputLength	設定の文字数と一致するかどうかをチェック	inputLength
LessThanInputLength	設定した文字数に未満かどうかをチェック	inputLength
LessThanOrEqualToInputLength	設定した文字数以下かどうかをチェック	inputLength
GreaterThanInputLength	設定した文字数に超過かどうかをチェック	inputLength
GreaterThanOrEqualToInputLength	設定した文字数以上かどうかをチェック	inputLength
BetweenMinAndMaxLength	設定した最低文字数を超過、最大文字数に未満かどうかをチェック	inputMinLength、inputMaxLength
BetweenOrEqualToMinAndMaxLength	設定した最低文字数以上、最大文字数以下かどうかをチェック	inputMinLength、inputMaxLength

次のサンプルコードでは、テキストコントロールが5文字未満かどうかの検証方法を示します。

// テキストコントロール
const gcTextBox1 = new GC.InputMan.GcTextBox(document.getElementById('gcTextBox1'),{
    text: 'あいうえお',
});
// 検証コントロール
var GcValidator1 = new GC.InputMan.GcValidator({
 items: [
    {
        control: gcTextBox1,
        ruleSet: [
            {
                // 検証規則を「入力文字数未満チェック」とする
                rule: GC.InputMan.ValidateType.LessThanInputLength,
                inputLength: 5, // 文字数を指定する
                failMessage: '5文字未満に入力してください',
            },
        ],
        validateWhen: GC.InputMan.ValidateWhen.Typing,
    }
  ]
});

他のコントロールと照合

コントロールに入力した値が他のコントロールの値と一致するかどうかを検証するには、他のコントロールと照合チェックを使用できます。値が一致しない場合は検証に失敗します。この検証規則が有効に動作する入力コントロールと検証時に比較するプロパティは以下の通りです。

コントロール	比較するプロパティ
GcTextBox	text
GcMultiLineTextBox	text
GcMask	value
GcDateTime	value
GcNumber	value
GcComboBox	text
GcRichTextEditor	text

ruleプロパティにValidateType.MatchControlを指定し、matchControlプロパティで他のコントロールを設定すると、両コントロールの値を比較します。

次のサンプルコードは、パスワードとパスワード確認用の２つのテキストコントロールを照合する例です。

// テキストコントロール
const gcTextBox1 = new InputMan.GcTextBox(document.getElementById('gcTextBox1'),{
        useSystemPasswordChar: true,
});
const gcTextBox2 = new InputMan.GcTextBox(document.getElementById('gcTextBox2'),{
        useSystemPasswordChar: true,
});
// 検証コントロール
var GcValidator1 = new GC.InputMan.GcValidator({
 items: [
    {
      control: gcTextBox2,
      ruleSet: [
        {
          // 検証規則を「他のコントロールと照合」とする
          rule: InputMan.ValidateType.MatchControl,
          matchControl: gcTextBox1,
          failMessage: 'パスワードが一致しません。',
        }
      ],
      validateWhen: GC.InputMan.ValidateWhen.Typing,
      notify:
      {
        tip:true
      }
    }
  ]
});

外部検証結果の指定

何らかのチェック処理を行って結果で判定して検証通知を表示したい場合、外部検証結果の指定を使用できます。

ruleプロパティにValidateType.Externalを指定し、validateメソッドでBoolean型のパラメータで検証成功または失敗を設定できます。

次のサンプルコードは、ラジオボタンのtrue/falseを切り替えることで、テキストコントロールに検証結果を適用する例です。

const gcTextBox1 = new GC.InputMan.GcTextBox(document.getElementById('gcTextBox1'));
const validator1 = new GC.InputMan.GcValidator({
    items: [
        {
            control: gcTextBox1,
            ruleSet: [
                {
                    rule: GC.InputMan.ValidateType.External, //外部検証結果で検証する
                    failMessage: `外部検証が失敗しました。`
                }
            ],
            validateWhen: GC.InputMan.ValidateWhen.Manual
        }
    ],
    validateWhen: GC.InputMan.ValidateWhen.Manual,
    notify:
    {
      tip:true
    }
});
document.querySelectorAll('input[name="validatorGroup"]').forEach(radio => {
    radio.addEventListener('change', function () {
    　//boolean型のパラメータで検証
        validator1.validate(gcTextBox1, this.value === 'true');
    });
});

カスタム検証規則

検証コントロールでは、独自の検証ロジックを設定することが可能です。

次のサンプルコードは、入力された値が偶数かどうかをチェックするロジックを以下のようにruleSet.ruleプロパティに直接設定する例です。（以下のコードは抜粋です）

var validator = new GC.InputMan.GcValidator({
    items: [
        {
            control: gcNumber3,
            ruleSet: [
                {
                    // 独自の検証ロジックを使用
                    rule: function (control) {
                        return control.getValue() % 2 == 0;
                    },
                    failMessage: function (control, context) {
                        return '偶数を入力してください。奇数' + control.getValue() + 'が入力されました。';
                    }
                }
            ]
        }
    ],
    defaultNotify: {
        tip: true
    }
});

また、registerValidateRuleメソッドで検証ロジックをあらかじめ登録し、そのロジック名をruleプロパティに設定する方法も提供しています。たとえば、以下のようなコードになります。

// 独自の検証ロジックの登録
GC.InputMan.GcValidator.registerValidateRule('chkEven', function (control, context) {
    var value = control.getValue();
    if (value === undefined || value === null) {
        return undefined;
    }
    return value % 2 == 0;
});

// 検証コントロール（抜粋）
var validator = new GC.InputMan.GcValidator({
    items: [
        {
            control: gcNumber3,
            ruleSet: [
                {
                    // あらかじめ登録した検証ロジックを使用
                    rule: "chkEven",
                    failMessage: function (control, context) {
                        return '偶数を入力してください。奇数' + control.getValue() + 'が入力されました。';
                    }
                }
            ]
        },
    ],
    defaultNotify: {
        tip: true
    }
});