有効なメールアドレスかチェックする

有効なメールアドレスかチェックするサンプルをご紹介します。

サンプルについて

本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。

動作イメージ

利用するイベント

• 申請入力画面イベント - 申請内容確認ボタンクリックイベント

サンプルフォーム

サンプルで利用するフォームには、以下のパーツを配置しています。

パーツID	パーツタイプ	補足
fidMailAddress	テキスト（一行）パーツ	ノーマル

カスタマイズコード

JavaScript

(function () {
    "use strict";

    /**
     * 有効なメールアドレスかチェックします。
     *
     * @param {*} mailAddress
     */
    function isValidMailAddress(mailAddress) {
        const validMailRegex = /^[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+(\.[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+)*@[a-zA-Z0-9_.-]+\.[a-zA-Z0-9]+$/;

        if (!validMailRegex.test(mailAddress)) {
            return false;
        }

        // 連続するドットが含まれる場合は無効
        if (mailAddress.indexOf('..') !== -1) {
            return false;
        }

        return true;
    }

    // 申請内容確認ボタンクリックイベント
    collaboflow.events.on('request.input.check', function (e) {
        const mailAddress = e.parts.fidMailAddress.value;

        if (isValidMailAddress(mailAddress)) {
            return true;
        }

        alert('項目「メールアドレス」に入力されたメールアドレスが不正です。');
        return false;
    });
})();

動作の確認手順

1. アプリ設定＞フォーム設定から新規に通常フォームを作成します。
2. サンプルフォームに、先で記載されている必要項目を配置します。
3. サンプルフォームを再度表示し、カスタマイズのタブを表示します。
4. サンプルのJavaScriptカスタマイズコードをjsファイルに保存します。
5. 保存したファイルをアップロードします。
6. アプリ設定＞経路設定から、先のフォームを利用した経路を作成します。
7. 新規文書から作成した経路名をクリックします。
8. 申請画面が表示されます。
9. 項目にメールアドレスを入力し、申請内容確認ボタンをクリックします。
10. 入力したメールアドレスが無効な場合、警告メッセージが表示され、申請内容確認画面に遷移しません。入力したメールアドレスが有効な場合、申請内容確認画面に遷移します。