顧客リストの郵便番号、TEL、メールの入力をチェックする

目次

概要

レコードの追加、編集、一覧のインライン編集の際に、フィールド値変更時および保存実行前イベントで郵便番号、TEL、FAX、メールの入力をチェックする。

完成形

デモ環境

デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/64/ (External link)

ログイン情報は cybozu developer network デモ環境で確認してください。

下準備

サンプルプログラム

プログラム

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
/*
 * 顧客リストの郵便番号、TEL、メールの入力をチェックするサンプルプログラム
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
 */

(() => {
  'use strict';

  // 郵便番号の入力チェック
  const zipCheck = (event) => {
    // 郵便番号の定義(7桁の半角数字)
    const zip_pattern = /^\d{7}$/;
    // event よりレコード情報を取得します
    const record = event.record;
    // エラーの初期化
    record.郵便番号.error = null;
    // 郵便番号が入力されていたら、入力値を確認します
    const zip_value = record.郵便番号.value;
    if (zip_value) {
      if (zip_value.length > 0) {
        // 定義したパターンにマッチするか確認します
        if (!(zip_value.match(zip_pattern))) {
          // マッチしない場合は、郵便番号フィールドにエラーの内容を表示するようにします
          record.郵便番号.error = '7桁の半角数字で入力して下さい';
        }
      }
    }
  };

  // 電話番号の入力チェック
  const telCheck = (event) => {
    // TELの定義(10桁または 11桁の半角数字)
    const tel_pattern = /^\d{10,11}$/;
    // event よりレコード情報を取得します
    const record = event.record;
    // エラーの初期化
    record.TEL.error = null;

    // TEL が入力されていたら、入力値を確認します
    const tel_value = record.TEL.value;
    if (tel_value) {
      if (tel_value.length > 0) {
        // 定義したパターンにマッチするか確認します
        if (!(tel_value.match(tel_pattern))) {
          // マッチしない場合は、TEL に対してエラーの内容を記載します
          record.TEL.error = '10桁 または 11桁の半角数字で入力して下さい';
        }
      }
    }
  };

  // FAXの入力チェック
  const faxCheck = (event) => {
    // FAXの定義(10桁または 11桁の半角数字)
    const fax_pattern = /^\d{10,11}$/;
    // event よりレコード情報を取得します
    const record = event.record;
    // エラーの初期化
    record.FAX.error = null;
    // FAX が入力されていたら、入力値を確認します
    const fax_value = record.FAX.value;
    if (fax_value) {
      if (fax_value.length > 0) {
        // 定義したパターンにマッチするか確認します
        if (!(fax_value.match(fax_pattern))) {
          // マッチしない場合は、FAX に対してエラーの内容を記載します
          record.FAX.error = '10桁 または 11桁の半角数字で入力して下さい';
        }
      }
    }
  };

  // メールアドレスの入力チェック
  const mailCheck = (event) => {
    // メールアドレスの定義 (簡易的な定義です。さらに詳細に定義する場合は下記の値を変更して下さい)
    const mail_pattern = /^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/;
    // event よりレコード情報を取得します
    const record = event.record;
    // エラーの初期化
    record.メールアドレス.error = null;
    // メールアドレスが入力されていたら、入力値を確認します
    const mail_value = record.メールアドレス.value;
    if (mail_value) {
      if (mail_value.length > 0) {
        // 定義したパターンにマッチするか確認します
        if (!(mail_value.match(mail_pattern))) {
          // マッチしない場合は、メールアドレスに対してエラーの内容を記載します
          record.メールアドレス.error = 'メールアドレスとして認識されませんでした。値を確認して下さい。';
        }
      }
    }
  };

  // 変更イベント(郵便番号)
  kintone.events.on(['app.record.create.change.郵便番号',
    'app.record.edit.change.郵便番号',
    'app.record.index.edit.change.郵便番号'], (event) => {
    zipCheck(event);
    return event;
  });

  // 変更イベント(電話番号)
  kintone.events.on(['app.record.create.change.TEL',
    'app.record.edit.change.TEL',
    'app.record.index.edit.change.TEL'], (event) => {
    telCheck(event);
    return event;
  });

  // 変更イベント(FAX)
  kintone.events.on(['app.record.create.change.FAX',
    'app.record.edit.change.FAX',
    'app.record.index.edit.change.FAX'], (event) => {
    faxCheck(event);
    return event;
  });

  // 変更イベント(メールアドレス)
  kintone.events.on(['app.record.create.change.メールアドレス',
    'app.record.edit.change.メールアドレス',
    'app.record.index.edit.change.メールアドレス'], (event) => {
    mailCheck(event);
    return event;
  });

  // 保存前イベント
  kintone.events.on(['app.record.create.submit',
    'app.record.edit.submit',
    'app.record.index.edit.submit'], (event) => {
    zipCheck(event);
    telCheck(event);
    faxCheck(event);
    mailCheck(event);
    return event;
  });
})();
  • エディターにサンプルプログラムをコピーし、ファイル名を「sample.js」文字コードを「UTF-8」にして保存します。(ファイル名は任意)
  • 準備したアプリの設定画面で、保存したファイルを読み込みます。
  • アプリの設定を完了します。

使用した API