必须在form.on('submit(filter)')回调中修改password字段值,可调用layui.form.val()写入加密后密码或直接操作dom;rsa需异步获取公钥并阻断提交,md5须拼接随机salt防重放。

layui 表单 submit 事件里改 password 字段值即可
layui 的 form.on('submit(...)') 是唯一可控、可干预表单最终提交内容的时机。此时 DOM 已校验通过,但请求尚未发出,你完全可以在发送前对 password 字段做任意处理——包括 MD5 哈希或 RSA 加密。
关键点:不要试图在 input[type="password"] 上监听 blur 或 change,那只是用户输入时的中间态;也不要在 form.on('submit...) 外部直接操作 DOM value,因为 layui 内部会读取表单元素的 value 属性生成提交数据,必须确保它已是加密后的内容。
- 用
layui.form.val('formFilter', {password: encryptedValue})主动写入加密后的密码(推荐) - 或直接修改 DOM:
document.querySelector('[name="password"]').value = encryptedValue - 若用 RSA,需先异步获取公钥(模数+指数),再加密;此时必须阻断默认提交,等加密完成再手动触发
form.submit() - MD5 不建议直接对明文密码哈希后传输——它仍是确定性计算,易被重放;至少要拼接前端随机 salt 或时间戳
MD5 加密不能只调 hexMD5(password) 就完事
单纯 hexMD5('123456') 得到固定字符串,攻击者截包后可直接重放。真实场景中必须引入不可预测因子,否则和明文传输没本质区别。
- 前端生成一次性的随机字符串(如
Math.random().toString(36).substr(2, 8)),和服务端约定好拼接顺序,再 MD5 - 服务端需同步保存该随机串(比如放在登录页 hidden input 或 localStorage),并在验证时复现拼接逻辑
- 更稳妥的做法是:前端用该随机串作为 AES 密钥,对密码做一次对称加密,再把密文 + 随机串一起发过去(即“MD5 + AES”组合)
- 注意:所有前端加密都只是增加攻击门槛,不能替代 HTTPS;没有 HTTPS,一切前端加密都可能被中间人篡改 JS 逻辑
RSA 加密必须等公钥加载完成才能提交
layui 表单 submit 默认同步执行,而 RSA 公钥通常需异步从后端接口获取(GET /api/public-key)。如果没等公钥就直接加密,会报错或加密失败。
- 在
form.on('submit(...)')回调开头立刻return false阻止默认提交 - 用
$.get()或fetch()请求公钥,拿到modulus和exponent后,用 jsbn 或jsencrypt库加密password - 加密完成后,用
layui.form.val('formFilter', {password: encrypted})更新字段,再调用layui.form.submit('formFilter')手动提交 - 务必加 loading 状态和错误提示:公钥请求失败时,用户不能无限等待;应给出明确错误并允许重试
- 避免在每次 submit 都重新请求公钥——可首次加载页面时就预取并缓存,减少延迟
别在 before 回调里做加密,它根本拿不到 password 值
layui upload 组件的 before 回调常被误用于表单加密,但它只适用于文件上传场景,且内部不暴露表单字段值。对普通登录表单而言,这个回调压根不会触发。
-
before是 upload 模块专用钩子,和form模块无关;混淆两者会导致逻辑失效 - 想在上传同时加密密码?那得把密码作为额外字段传进
upload.data,并在choose或before里手动赋值——但这已脱离标准表单流程,容易出错 - 真正需要防重复提交的,是上传文件本身(用 MD5 校验文件内容),不是密码字段;二者目标不同,别混用同一套机制











