やむを得ずjQuery로 폼의 유효성 검사를 行う必要があったのでめて行った方法を残しておきます.

今 今 時代 時代 の 반응 반응 や vue.js など の の 仮想 dom で で 簡単 に 行える よう よう に なっ て いる ので 、 、 わざわざ わざわざ わざわざ わざわざ も も も も も も も 반응しました.

사타라이브랄리

今回は jQuery Validation Plugin を使用しました.
思ってた１０倍は便利なライブラリでした

신풀나 사용 방법

私はCDN으로부터 引っ張ってきたのでこちらを貼り付けるだけです.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>

あとは, 스크립팅으로 対象의 형식에 にvalidate関数を仕込んであげるだけ입니다.

<form id=validationForm>
  <input name="mail">
  ....
</form>

<script type="text/javascript">
  $(function(){
    $('#validationForm').validate({
      rules: {
        name: {
          required: true
        },
        mail: {
          required: true,
          email: true,
        },
        mailConfirm: {
          email: true,
          equalTo : "#mail"
        },
        content: {
          required: true
        },
      },
      messages: {
        name: {
          required: '名前を入力してください。',
        },
        mail: {
          required: 'メールアドレスを入力してください。',
          email: '有効なメールアドレスを入力してください。'
        },
        mailConfirm: {
          required: '確認メールアドレスを入力してください。',
          email: '有効なメールアドレスを入力してください。',
          equalTo : 'メールアドレスが一致しません。'
        },
        content: {
          required: '内容を入力してください。',
        },
      },
    });
  });
</script>

규칙으로 required や email 등의 프리셋 の ルールを仕込むことができますし、正規表現でvalidationをかける こともできます(私は使っていないので割愛します)required は ォームが必須의 場合に使用するルール입니다.email は有効なメールAddressのvalidation(을)를 해 くれますequalTo は指定したinput(今回は#mail)to同一の内容かをCHECKしてくれます.

메시지로 유효성 검사를 시작하고 결합하여 메시지를 보내는 메시 지를 확인하는 것입니다.

これで最低限の機能としての実装は終わり입니다.
こちらで動かすと、validation失敗時にinputTAGの直下にラベルが追加されるようになります.



ここで、できればエラーは赤文字にしたいと思うかもしれません.そのためのoption機能も用意してくれています.それがerrorPlacement と success で す.

<script type="text/javascript">
  $(function(){
    $('#validationForm').validate({
      rules: {
        ...
      },
      messages: {
        ..
      },
    },
    errorPlacement: function (error, element) {
      // あるinputのvalidationに失敗した際に呼ばれる。自分で表示をカスタマイズしたいときに使用する。
      // error はエラー時に表示するelement(例: <label>メールアドレスを入力してください。</label>)が入っている
      // element にはエラーが発生したelement(例: <input name="mail" ...>)が入っている

      // 一例: エラー発生inputの上にあるdivのclass名を --error に変える
      const errorElement = element.closest("div")
      errorElement.removeClass()
      errorElement.addClass('xxxxxx--error')

      // 赤文字で表示できるように定義済みのクラス .item__error を使用したエレメントを errorElement の中に append する
      const errorMessage = errorElement.children("p")
      const customErrorMessage = $($.parseHTML('<span class="item__error">' + error.text() + '</span>'));
      errorMessage.append(errorMessageNodes)
    },
    success: function(error, element) {
      // あるinputのvalidationに成功したときに呼ばれる。表示済みのエラーを削除する際に使用する。
      // error はエラー時に表示していたelement(例: <label>メールアドレスを入力してください。</label>)が入っている
      // element にはエラーが発生していたelement(例: <input name="mail" ...>)が入っている

      // divに装飾していたエラー用classを戻してあげる
      const errorElement = element.closest("div")
      errorElement.removeClass()
      errorElement.addClass('xxxxxx')

      // 赤文字で表示していたエラー内容を削除する
      const errorMessage = errorElement.children("p")
      errorMessage.children(".item__error").remove()
    });
  });
</script>

以上でうまくvalidationsる ことができました.