利用layer实现表单完美验证

//基于layer框架之上,验证表单时引用。弹出提示错误
function qxMsg(msgStr) {
  layer.open({
    type: 1,
    title: '提示消息',
    offset: '10%;',
    content: '<div style="padding: 20px 80px;">'+msgStr+'</div>',
    btn: '关闭',
    btnAlign: 'c',
    shade: 0.2,
    yes: function() {
      layer.closeAll();
    }
  });
}

  上边是封装好的layer方法,下边是结合表单开始验证

//表单验证
function checkForm() {
  var err = "";
  if(!$('input[name="ggName"]').val()) {
    err += "<br/>名称不能为空";
  }
  if(!$('input[name="isId"]').val()) {
    err += "<br/>空间分类不能为空";
  }
  if(err) {
    err = err.substring(5);
    qxMsg(err);
    return 0;
  }
  return 1;
}

  在ajax提交表单之前调checkForm方法即可,如:

//提交新增数据
function addGgBaseModel() {
  var flag = checkForm();
  if(flag == 0) return;
  var formData = new FormData(document.getElementById("myform"));
  formData.append("SysType", "10101");
  formData.append("SysName", "qxPC");
  formData.append("ModuleName", "规格型号");
  $.ajax({
    type: 'post',
    url: _URL_BASE + '/ggBaseModel/addGgBaseModel ',
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    dataType: 'json',
    success: function(retData) {
      console.log(retData);
      if(retData.ReturnType == "1001") {
        qxMsg("添加成功");
        $(".layui-layer-btn0").click(function() {
          $('.modal-backdrop').remove();
          $("#myModal").hide();
          getGgBaseModel();
        })
      } else if(retData.ReturnType == "4004") {
        kickout();
      } else {
        qxMsg(retData.Message);
      }
    },
    error: function(retData) {
      qxMsg("提交数据出错");
    }
  });
};

  

原文地址:https://www.cnblogs.com/TigerZhang-home/p/8301408.html