HTML

<form action=""class="formBox">
    <input type="text" placeholder="YOUR NAME">
    <input type="text" placeholder="YOUR MAIL">
    <textarea name="" id="" placeholder="YOUR MESSAGE"></textarea>
    <input type="submit" value="Submit your email" class="tjBtn">
</form>

jQuery

var common = {
   baseSize: 100,
   init: function () {
     let that = this;
     that.bindSubmitBtn();
  },
  bindSubmitBtn: function () {
     $(document).ready(function () {
         $($("input.tjBtn")[0]).bind("click", function () {
            //  alert("Hello World bind");
            // $("form.formBox").attr("action", "#");
            $('form.formBox').submit((e) => {
                  e.preventDefault();
            })
            //获取第一个input
            var userNmae = $($($("form.formBox")[0]).find("input")[0]).val();
            //获取第二个input
                var userEmail = $($($("form.formBox")[0]).find("input")[1]).val();
            //获取第一个textarea
            var usermsg = $($($("form.formBox")[0]).find("textarea")[0]).val();
            //自定义参数名
            var param = { name: userNmae, email: userEmail, message: usermsg };
            //  用户名验证
            if (userNmae == null || userNmae == "") {
                  alert("用户名不能为空");
                  return false;
            } else if (userNmae.length < 5 || userNmae.length > 20) {
                  alert("用户名长度必须介于5-20个字符之间!");
                  return false;
            }
            var atpos = userEmail.indexOf("@");
              var dotpos = userEmail.lastIndexOf(".");
            // 邮箱验证
            if (userEmail == "") {
                  alert("邮箱不能为空");
                  return false;
            } else if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >=         userEmail.length) {
                  alert("不是一个有效的 e-mail 地址");
                  return false;
            }
            // 信息验证
            if (usermsg == "") {
                  alert("信息不能为空");
                  return false;
            }
            //提交表单
            $.ajax({
                  type: "POST",
                  url: "https://api.trade.org/live/userinfo",
                //传参param
                  data: param,
                  dataType: "json",
                  success: function (respMsg) {
                    msgpop(respMsg.msg , 3000)
                  }
            });
            // return false;
          });
    });
  },
};
/**
 *添加提示弹框
 * msg 提示消息文案
 * time 提示消息弹窗显示时长(单位毫秒)
 */ 
function msgpop(msg,time) {
      $(".popup2").after(`
        <div class='popup3'>
            <div>${msg}</div>
        </div>
      `);

      setTimeout(function () {
          $('.popup3').remove();
      },time||5000)
}

common.init();

黑仔
4 声望0 粉丝

技术不在于广,而在于精!