Layui表单input如何实现输入敏感信息时自动进行前端加密-Layui教程-PHP中文网

前端敏感信息“自动加密”是为防止明文裸露于dom/控制台及降低xss或中间人风险，而非替代https；须手动集成加密库，在layui表单提交前统一加密，禁用实时监听，推荐公钥动态下发+非对称加密+隐藏域传密文。

前端对敏感信息（如密码）做“自动加密”不是为了替代 https，而是防止明文在 dom 或控制台中裸露、降低中间人或 xss 场景下的风险。layui 本身不提供加密能力，必须手动集成加密库并在表单提交前处理字段值。

为什么不能只靠 `autocomplete="off"` 或禁用浏览器保存？

这只能阻止浏览器自动填充历史记录，但用户输入的明文依然会完整存在于 input.value、form.serialize() 和网络请求载荷中。若未加密就提交，任何抓包工具（如 Fiddler、浏览器 Network 面板）都能看到原始密码。

autocomplete="off" 对现代浏览器效果有限，部分仍会提示；更关键的是它和加密无关
仅移除 name 或加 lay-ignore 会导致 form.val() 读不到值，破坏 Layui 表单管理逻辑
直接在 input 上绑定 oninput 动态加密并覆盖 value，会导致光标跳动、无法选中/粘贴、与 form.verify 冲突

正确做法：提交前统一加密，且保留原始输入体验

加密动作应发生在用户点击提交按钮、且表单校验通过之后，而不是实时监听输入。这样既不影响交互，又能确保最终发出的数据是密文。

用 form.on('submit(filter)', callback) 拦截提交，不要用原生 submit 事件
在回调中先调用 form.validate() 确保校验通过，再读取原始值（如 $('#password').val()）
用 CryptoJS.AES.encrypt() 或 JSEncrypt 加密后，把密文赋给隐藏域或替换原字段值（推荐隐藏域，避免污染 UI 字段）
务必调用 e.preventDefault()，否则原生表单会以明文提交

示例片段：

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

form.on('submit(login-submit)', function(data){
  var pwd = $('#password').val();
  if (!pwd) return false;
  
  // 使用 JSEncrypt（需提前引入）
  var encrypt = new JSEncrypt();
  encrypt.setPublicKey('-----BEGIN PUBLIC KEY-----...-----END PUBLIC KEY-----');
  var encryptedPwd = encrypt.encrypt(pwd);
  
  // 写入隐藏域，提交时由后端读取
  $('#encrypted_password').val(encryptedPwd);
  
  // 移除明文字段，或清空（取决于后端是否需要）
  $('#password').val('');
  
  return true; // 允许 Layui 提交
});