ブログ

2024/07/17
【プリザンター】 第256回)実践的メールアドレス入力欄の追加

正しいメールアドレスを入力してもらうには

こんにちは、CCS田中です。

プリザンターを入力フォームとしても使用されている方もいらっしゃるかと思います。
メールアドレスを間違って入力されてしまうと連絡が取れないばかりか、間違った宛先に連絡してしまう恐れもあります。そのため、極力間違いのないように正しいメールアドレスを入力してもらう方法について説明します。

メールアドレスは、RFC(インターネットの技術的な仕様を記載したもの)に規定されていますので、一定のルールがあります。
たとえば、『文字列は半角英数字、数字、および【-】(ハイフン)、【+】(プラス)、【.】 (ピリオド、ドット)、【_】(アンダーバー)の半角記号のみ使用できる。』や、『一つ目の文字はアルファベットまたは数字のみ』などです。
これらに従っていないものは、間違っているため入力させない(エラーを出す)ことが必要です。

また、メールアドレスを1度だけ入力させた場合に、タイプミスしたときにそのまま登録されてしまい、間違ったメールアドレスが登録される場合があります。それを避けるには2回メールアドレスを入力させることで間違いを低減させることができます。ただし、入力フォームのため、1つ目に入力したメールアドレスを2つ目の確認用のメールアドレスにコピペされてしまっては意味がありませんので、コピペを制限する必要があります。

このようなことをプリザンターで実現する場合に、どのように設定するかの例をご紹介します。

正しいメールアドレス入力のためのプリザンターの設定

今回はサンプルとして、記録テーブルを作成し、「分類A」(メールアドレス)と「分類B」「メールアドレス確認用」の2つの項目を追加したものを使います。

まず初めに入力時にルールに従ったメールアドレスが入力されるようにするための設定です。
これは、項目の「入力検証」を使って、正規表現で記載することで実現できます。

1)作成したテーブルを開いて、「管理」→「テーブルの管理」→「エディタ」タブを開きます。
2)「分類A」(メールアドレス)を選択して、「詳細設定」ボタンをクリックします。
3)「入力検証」タブをクリックします。
4)以下のように「クライアント正規表現」と「エラーメッセージ」を入力します。
5)「変更」ボタンをクリックします。
6)「更新」ボタンをクリックします。

「クライアント正規表現」
^[a-zA-Z0-9_+-]+(.[a-zA-Z0-9_+-]+)*@([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.)+[a-zA-Z]{2,}$

「エラーメッセージ」
正しい形式のメールアドレスを入力してください。



「分類B」(メールアドレス確認用)でも同様の設定を行います。

次に、メールアドレスのコピペを禁止する設定をスクリプトで行います。
出力先は、「新規作成」と「編集」にチェックします。


<スクリプト>(出力先:新規作成、編集)


$(document).ready(function() {
const $email1 = $('#Results_ClassA');
const $email2 = $('#Results_ClassB');

// コピペを防止
$email1.on('copy paste', function(e) {
e.preventDefault();
});
$email2.on('copy paste', function(e) {
e.preventDefault();
});
});




最後に、サーバスクリプトで、メールアドレスが一致しているときにのみ、更新できるように設定します。
条件は、2つのメールアドレスが一致していなかった時は作成・更新しないように「作成前」と「更新前」にチェックします。

<サーバスクリプト>(条件:作成前、更新前)

try {
if(model.ClassA != model.ClassB){
context.Error('メールアドレスが一致しません、確認してください。');
}
} catch (e) {
context.Log(e.stack);
}



これで設定は完了です。

メールアドレスの形式が正しくない場合の表示例


2つのメールアドレスが一致しないで作成ボタンをクリックしたときの表示例



まとめ

いかがでしたか?

今回は実践的な入力フォームの各種設定について説明しました。入力検証やスクリプト、サーバスクリプトを使うことでプリザンター上でメールアドレスを正しく入力させるための仕組みについて理解できたと思います。

弊社ではプリザンターをご使用中、または、これからご使用になられる方向けに、運用ノウハウ集、プリザンター逆引き辞典、スタイル・スクリプトサンプル集の販売を行っております。
また、 プリザンターからのExcel帳票出力・PDF帳票出力の支援パック販売 も行っております。
プリザンター導入の支援や、スクリプト開発などの支援も行っておりますので、まずは気軽にご相談ください。
※ご相談の内容によっては有料となる場合がございます。予めご了承ください。
☆☆☆
ブログ内容への質問や追加説明をご希望の方は【 問い合わせフォーム 】からお気軽にお問い合わせください
☆☆☆

PAGE TOP