お問い合わせフォーム等を作成する時、日本語(ひらがな・カタカナ・漢字)のどれかが含まれているかどうかをチェックすることで、スパムであったりbotであったり不正な攻撃であったりをある程度防ぐことができます。そしてPHP側での実装ももちろん必要ですが、JS側でも判定することで少しでもサーバの負荷を減らすことができます。
PHP側は検索するとたくさん出てきたので、今回はJSのみ紹介します。ちなみにJavaScriptそのものしか使って無いので、例はJqueryで書いてますが少し書き方を変えればVueでもReactでも使えます。
判定する関数を作成
まずは以下の関数を作成しましょう。文字列に日本語が含まれていればTrueを、含まれていなければFalseを返します。
function includeJa(text) {
try {
let gmi = 'gmi';
let regeIncludeHiragana = '^(?=.*[\u3041-\u3096]).*$';
let regeIncludeKatakana = '^(?=.*[\u30A1-\u30FA]).*$';
let regeIncludeKanji = '^(?=.*[\u4E00-\u9FFF]).*$';
let regeHiragana = new RegExp(regeIncludeHiragana, gmi);
let regeKatakana = new RegExp(regeIncludeKatakana, gmi);
let regeKanji = new RegExp(regeIncludeKanji, gmi);
let includeJa = false;
if (regeHiragana.test(text))
includeJa = true;
if (regeKatakana.test(text))
includeJa = true;
if (regeKanji.test(text))
includeJa = true;
return includeJa;
} catch (error) {
alert(error);
}
}変数regeInclude~~~には、「対象文字列を含む」を表す正規表現が渡されています。変数rege~~~は実際に正規表現を使って判定を行うインスタンスです。
gmiは正規表現に関するパラメータです。内容の解説は省略しますが必要なので消さないでください。
そして実際に判定を行うメソッドは.test()です。これは正規表現とマッチしていればtrueを、そうでなければfalseを返すメソッドです。
ここで注意ですが、new RegExpで作成したインスタンスは使い回さない様にしてください。使い回すと結果が変わってしまうことがあります。なので今回は関数内で都度インスタンスを作成しています。
呼び出し方
多分これを使いたい時ってフォームの入力判定だと思うので、その体ですすめます。
この作成した関数をJqueryで呼び出す際は
includeJa($('.form-target').val())でOK。対象のinputタグにクラス名を付けておき、それを指定してください。val()で入力内容を取得することができます。
まとめ
正規表現で「全てが日本語」のパターンはネット上にたくさんあったのですが、「日本語を含む」は案外なかったですし、あってもイマイチ動かなかったりとなかなか答えが見つからず、最終的には自分で正規表現の書き方を調べました。オリジナルなのでもしかするとうまく判定できないパターンがあるかもしれませんが、その辺りは自己責任でお願いします。。
