layui文本域如何实现内容加密后再传输-Layui教程-PHP中文网

前端加密必须在 form.on('submit') 回调中通过 dom 操作覆盖 textarea 值，而非修改 form.val() 返回的对象；表格编辑需在 table.on('edit') 中用 obj.update 同步密文至 cache；密钥不可硬编码，须动态生成。

layui文本域如何实现内容加密后再传输

直接在传输前对 textarea 值做前端加密即可，Layui 本身不参与加解密流程，也不提供内置加密能力——它只负责把原始字符串传给你的提交逻辑。关键在于：加密必须发生在表单提交的最终一刻，且不能干扰 Layui 的值获取机制。

为什么不能在 form.val() 之后再加密？

因为 form.val() 返回的是一个纯对象，字段值已是字符串；但如果你在调用后手动修改该对象里的 desc 字段，比如：

let data = form.val('myForm');
data.desc = encrypt(data.desc); // ❌ 错误时机
form.submit(); // 此时 submit 不会读取你改过的 data

这种写法无效：form.submit() 不会使用你修改后的 data，它仍按原始 DOM 值提交。真正起作用的是你在 form.on('submit(...)') 回调里返回的布尔值或阻止默认行为的时机。

正确做法：在 submit 回调中拦截并加密

必须在 form.on('submit(filter)') 的回调函数内完成加密，并用加密后的内容替换原始值（通过 DOM 操作），确保后端收到的是密文：

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

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

下载

先用 form.val('filter') 或直接 document.querySelector('[name="desc"]').value 获取明文
调用你的加密函数（如 AES、RSA 或简单 Base64）处理该字符串
将结果写回原 textarea 元素：elem.value = encrypted（注意不是改对象）
此时 form.submit() 或自然表单提交才会发出密文

示例（使用 Web Crypto API AES-GCM）：

form.on('submit(myForm)', function(data){
  const textarea = document.querySelector('[name="desc"]');
  const plain = textarea.value;
  if (!plain.trim()) return true;

  encryptString(plain).then(cipher => {
    textarea.value = cipher; // ✅ 覆盖 DOM 值
  }).catch(e => {
    layer.msg('加密失败');
    return false;
  });

  return true; // 让表单继续提交
});