JQuery获取form表单数据及数据提交(二)

HTML

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(`
        
${msg}
`); setTimeout(function () { $('.popup3').remove(); },time||5000) } common.init();

你可能感兴趣的:(前端jqueryajax)