jqueryでvaridationを実装する方法2 - NGワードチェック追加

はじめに

jqueryでvalidationを実装する方法 - とりあえずphpとか
こちらで実装したvalidationにさらにNGワードのチェックをリアルタイムにつける必要があったので、この処理にさらに実装方法を追加

追加する機能
・NGワードのリストはデータベースにもつ
・NGワードのチェックはリアルタイムに行う

になります

ajaxで実装してみる

前回の実装

$("#name").bind("keydown keyup",function(event) {
  if($(this).val().length <= 0) {
    $("#err_name").html(ERROR_REQUIRE);
  } else if (NAME_MAX_LENGTH < $(this).val().length) {
    $("#err_name").html(ERROR_LENGTH);
  } else {
    $("#err_name").html("");
  }
  flgName = !$("#err_name").html();
  enableSubmit();
});

今回の実装

$("#name").bind("keydown keyup",function(event) {
  if($(this).val().length <= 0) {
    $("#err_name").html(ERROR_REQUIRE);
  } else if (NAME_MAX_LENGTH < $(this).val().length) {
    $("#err_name").html(ERROR_LENGTH);
  } else {
      $.ajax({
          url: '/api/ngwords',
          type: 'post',
          data: { 'message': $this.val() },
          success: function(res) {
             if (res == "OK") {
               $("#err_name").html("");
             } else {
               $("#err_name").html(ERROR_NGWORDS);
              }
              flgName = !$("#err_name").html();
              enableSubmit();
            }
        });
  }
  flgName = !$("#err_name").html();
  enableSubmit();
});

こんな感じでサーバ側にNGチェック用のAPIを用意してそれに入力した文字を渡してチェックの結果をかえしてもらう。
という形を検討しました。が、そこそこアクセスを見込んでるようなのでこれだと無駄にアクセスが増えてしまって少し不安、、、

ajaxを使わないで実装

<!-- この外部JSファイルが動的にNG_WORDSという正規表現文字列を定義してくれるように実装 -->
<script src="/api/ngwords.js"></script>
//var NG_WORDS = "/ほげ|ぴよ/i"; が定義される

$("#name").bind("keydown keyup",function(event) {
  if($(this).val().length <= 0) {
    $("#err_name").html(ERROR_REQUIRE);
  } else if (NAME_MAX_LENGTH < $(this).val().length) {
    $("#err_name").html(ERROR_LENGTH);
  } else if ($(this).val().replace(/\s+/g,"").match(NG_WORDS)) {
    $("#err_name").html(ERROR_NG_WORDS);
  } else {
    $("#err_name").html("");
  }
  flgName = !$("#err_name").html();
  enableSubmit();
});

こんなかんじの実装がまぁ現実的なところだろうか。
ただNGワードについて、今回はある程度想定できるデータ量だがこれが膨大になる場合はこれだと厳しいかも、、、
ちなみにapi/ngwords.jsが返す正規表現はエスケープ済みの文字列を想定しています

以上です