jQueryでメールアドレスの入力チェックを行う

<div>
  <label for="email">メールアドレス：</label>
  <input type="email" id="email" name="email" placeholder="sample@take-it-easy.site" size=40 />
  <div id="error-msg-email" class="error-msg" style="display: none;"></div>
</div>

$(function () {
  // フォーカスが当たった場合のイベントハンドラ
  $("#email").on("focus", function () {
    $("#email").removeClass("input-error");
    $("#error-msg-email p").remove();
    $("#error-msg-email").hide();
  });

  // フォーカスが外れた場合のイベントハンドラ
  $("#email").on("blur", function () {
    // トリム
    $("#email").val($.trim($("#email").val()));
    // 入力チェック
    validate_email();
  });
});

/**
 * メールアドレスの入力チェック
 */
function validate_email() {
  var val = $("#email").val();
  // 必須チェック
  if (val == "") {
    $("#error-msg-email").show().append("<p>メールアドレスは入力必須項目です。</p>");
    $("#email").addClass("input-error");
  }
  // メール形式チェック
  else if (!val.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) {
    $("#error-msg-email").show().append("<p>メールアドレスを入力してください。</p>");
    $("#email").addClass("input-error");
  }
}