layui 的 form.js 中添加 u.prototype.getData,用于获取 form 表单的数据

  1. 代码如下
u.prototype.getData = function (e) {
  e = $('.layui-form[lay-filter="' + e + '"]').eq(0);
  const nameIndex = {} /*数组 name 索引*/
    , field = {}
    , fieldElem = e.find('input,select,textarea'); /*获取所有表单域*/
  layui.each(fieldElem, function (_, item) {
    item.name = (item.name || '').replace(/^\s*|\s*&/, '');
    if (!item.name) return;
    
    /*用于支持数组 name*/
    if (/^.*\[\]$/.test(item.name)) {
      var key = item.name.match(/^(.*)\[\]$/g)[0];
      nameIndex[key] = nameIndex[key] | 0;
      item.name = item.name.replace(/^(.*)\[\]$/, '$1[' + (nameIndex[key]++) + ']');
    }
    if (/^checkbox|radio$/.test(item.type) && !item.checked) return;
    field[item.name] = item.value;
  });
  /*检查重复字段*/
  $.each(field, function (index, key) {
    if (e.find("input[name='" + index + "']").size() > 1) {
      /*删除原有字段属性*/
      delete field[index];
      let newArrary = Array();
      /*更新数组长度*/
      for (v = 0; v < $("input[name='" + index + "']").size(); v++) newArrary.push($("input[name='" + index + "']:eq(" + v + ")").val());
      /*增加属性*/
      field[index] = newArrary;
    }
  });
  return field;
}
  1. 调用方式
<form id="addForm" class="layui-form" lay-filter='addForm'>
  <input type="text" name="name" />
</form>

<script type="text/javascript">
  layui.use(['form','jquery'], function () {
    var $ = layui.jquery;
    var form = layui.form;

    // 获取 form 表单数据
    const formValue = form.getData("addForm");
    $.ajax({
      url: url,
      type: "post",
      // 解决数组问题
      traditional: true,
      dataType: "json",
      data : formValue,
    });
  });
</script>
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐