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

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐