step属性不适用于大额转账场景，因其仅控制输入框数值增减步长，无法实现业务级校验、余额检查、防篡改及风控拦截。
step 属性不适用于大额转账场景
step 是 <input type="number"> 的原生属性，用于约束用户输入值的增量步长（如 step="0.01" 限制小数点后两位），但它**无法实现“大额转账”所需的业务级校验逻辑**。浏览器只做数值对齐（比如输入框里按上下箭头时跳变），不拦截非法金额、不校验余额、不防篡改、不触发风控。
为什么直接用 step="10000" 会出问题
设置 step="10000" 表面看是“每步 1 万元”，但实际存在多个硬伤：
- 用户仍可手动输入任意值（如
9999或15000），step完全不阻止 - 提交时若后端没校验，就会绕过业务规则，造成资损风险
- 不同浏览器对
step的解析有差异（例如 Safari 对step="any"支持更宽松，Chrome 更严格） - 无障碍访问（如屏幕阅读器）可能误读该属性，影响合规性
真正需要做的三件事
大额转账必须组合前端交互 + 后端校验 + 用户确认，不能依赖单个 HTML 属性：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 前端用
input+change和blur事件实时校验：检查是否为10000的整数倍，不是则高亮并提示“请输入万元整数倍金额” - 后端接口必须重复校验：
if (amount % 10000 !== 0)直接拒绝，返回明确错误码（如400 Bad Request+"amount_must_be_multiple_of_10000"） - 在最终确认页显式展示“本次转账：¥
120000（12 万元整）”，并要求二次密码或短信验证——这才是风控关键点
示例：最小可行校验逻辑
<input type="number" id="transferAmount" placeholder="请输入转账金额"><div id="errorTip" style="color:red;font-size:12px;"></div>
对应 JS：
const input = document.getElementById('transferAmount');
const tip = document.getElementById('errorTip');
input.addEventListener('blur', () => {
const val = Number(input.value);
if (val && val % 10000 !== 0) {
tip.textContent = '金额必须为 1 万元的整数倍';
input.setCustomValidity('step_mismatch');
} else {
tip.textContent = '';
input.setCustomValidity('');
}
});
注意：setCustomValidity 能让 form.checkValidity() 生效，但依然不能替代后端校验——用户禁用 JS 或抓包重放请求时，前端逻辑形同虚设。
真正卡住大额转账的，永远是服务端鉴权、余额冻结、操作留痕和人工复核机制，不是 step 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
