直接修改input.value会导致光标错乱且Layui无法感知，应在submit时用正则/(\d{4})(?=\d)/g格式化；blur失焦处理更安全，验证和后端均需用纯数字。
为什么直接用 input 的 value 拼接空格会出问题
用户输入时，光标位置会错乱，尤其在中间修改某几位（比如删掉第 8 位），格式化后光标直接跳到末尾；oninput 或 onkeyup 里反复赋值 input.value 会打断原生输入行为，layui 的 form.render() 也无法感知这种手动修改。
- 不要在
input原生事件中直接改value字符串再赋回去 - Layui 表单默认不接管输入逻辑，得自己维护光标位置或换思路
- 银行卡号常见格式是每 4 位加空格（
1234 5678 9012 3456），但用户实际输入的是纯数字，格式只是展示层需求
用 layui.form.on('submit') 做提交前格式化最稳妥
不干扰输入过程，只在真正提交时处理数据。Layui 的表单监听机制能确保你拿到原始输入值，再按需格式化后发给后端或展示。
layui.form.on('submit(formDemo)', function(data){
let raw = (data.field.cardno || '').replace(/s/g, ''); // 先去空格
if (/^d{16,19}$/.test(raw)) {
// 每4位加空格，不足4位不加
data.field.cardno = raw.replace(/(d{4})(?=d)/g, '$1 ');
}
console.log('提交值：', data.field.cardno); // 如 "1234 5678 9012 3456"
return true; // 允许提交
});
-
data.field.cardno是未格式化的原始值，始终可靠 - 正则
/(d{4})(?=d)/g确保只在每 4 位数字后、且后面还有数字时插入空格，避免末尾多空格 - 后端接收时仍建议按纯数字校验，前端格式化仅用于展示或日志可读性
如果必须实时显示格式（非必需，慎用）
可以用 input 的 blur 事件做失焦格式化，避开光标问题；或者用 setInterval + selectionStart 手动维护光标，但复杂度陡增，多数场景没必要。
document.getElementById('cardno').addEventListener('blur', function(){
let v = this.value.replace(/s/g, '');
if (/^d{16,19}$/.test(v)) {
this.value = v.replace(/(d{4})(?=d)/g, '$1 ');
}
});
- 用
blur而不用input，是因为失焦时用户已完成一段输入，光标位置不再敏感 - 记得在 Layui 初始化后绑定，否则 DOM 可能还没就绪
- 如果用了 Layui 的
form.verify，验证函数里仍要传原始值（return /d{16,19}/.test(val.replace(/s/g,''));）
注意 Layui 版本对 form.render() 的影响
Layui 2.8+ 对 input 类型做了更多封装，但 form.render() 不会重置 value，所以你手动设置的格式化值不会被清掉——这点和旧版一致，但别指望它帮你自动格式化。
- 调用
form.render('text')或form.render()不会影响已存在的value内容 - 如果页面有动态添加的表单元素，记得在插入后调用
form.render()，否则监听事件不生效 - 银行卡号字段若设了
lay-verify="required|number"，验证的是原始输入值，不是格式化后的字符串
blur，别碰 input 过程中的光标逻辑。 
