layui文本域怎么防止表单重复提交-Layui教程-PHP中文网

应第一时间禁用提交按钮而非textarea，因disabled的textarea会被layui校验跳过；需在form.on('submit')回调首行禁用按钮，异步校验完成且done(true)后才提交，恢复逻辑必须放在ajax complete钩子中。

layui文本域怎么防止表单重复提交

form.on('submit') 回调里第一时间禁用按钮，不是文本域

文本域（textarea）本身不触发提交，也不该被禁用——Layui 的 form.verify() 会跳过所有 disabled 表单项，如果你顺手把 textarea 设为 disabled，它就不再参与校验，用户可能绕过必填/长度限制直接提交。

真正要锁住的是提交按钮。实操要点：

在 form.on('submit(*)') 回调函数第一行就执行：$(this).prop('disabled', true).text('提交中…').addClass('layui-btn-disabled')
不要用 attr('disabled', 'disabled')，部分浏览器下语义不生效
别在禁用前写 return false 或提前中断事件流，否则后续逻辑（如校验、AJAX）不执行
如果表单用过 layui.form.render()，禁用状态会被重置，需在 render 后手动再设一次

异步验证（如内容长度、敏感词）完成后再禁用

如果你对 textarea 做了异步校验（比如调用接口检查是否含违禁词），必须等 done(true) 或 done(false) 执行完，才能禁用按钮。否则 UI 提前锁死，用户无法修改内容。

常见错误写法是：点击就禁用 → 发异步请求 → 请求返回后才校验 → 校验失败时按钮已卡死。

正确顺序：

先让 Layui 同步校验（如 required、maxlength）通过
再发异步请求（如 $.ajax 检查敏感词）
收到响应后，调用 done(true) 或 done(false)
仅当 done(true) 返回后，才执行按钮禁用 + AJAX 提交

complete 钩子里统一恢复按钮状态

只在 success 回调里恢复按钮是高危操作。网络超时、后端 500、用户切页再切回，都会导致按钮永久 disabled。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

必须把恢复逻辑放在 $.ajax() 的 complete 钩子中，覆盖所有退出路径：

$.ajax({
  url: '/api/submit',
  type: 'POST',
  data: data.field,
  beforeSend: function() {
    // 可选：再次检查按钮是否已禁用，防并发漏掉
    if ($(this).prop('disabled')) return false;
  },
  complete: function() {
    $(this).prop('disabled', false).text('提交').removeClass('layui-btn-disabled');
  }
});

别用 setTimeout 延迟恢复——2 秒不够，10 秒又太长，网络延迟不可控。