本文介绍一种符合 web 标准、用户体验友好的方式，使用原生 `` 配合 `setcustomvalidity()` 和 `reportvalidity()` 实现对 0–1 浮点数的精确校验，避免正则拦截导致的输入阻塞问题。
在 React 应用中，限制用户输入为 0 到 1 之间（含端点）的浮点数，关键在于平衡「数据准确性」与「交互友好性」。直接在 onChange 中过滤非法字符（如用正则拦截 1.0 或 000.1）容易导致光标跳变、粘滞输入或状态不同步，属于反模式 UX。
推荐采用浏览器原生验证机制：使用 ，它天然拒绝字母、符号等非数字内容（如 abc、0.1.2），同时支持科学计数法（如 1e-2）——这虽超出范围但可交由后续逻辑统一校验。
核心思路是：不阻止输入，而是在输入后即时反馈有效性。通过 setCustomValidity() 设置自定义错误消息，并调用 reportValidity() 触发浏览器原生提示（带图标和气泡），既语义清晰又无需额外 UI 开发。
以下是完整实现示例（适配主流 UI 库如 MUI 的 TextField 原理相同）：
import { useState } from 'react';
const FloatInputInRange = () => {
const [value, setValue] = useState<string>('');
const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
const input = e.target;
const num = Number(input.value);
// 允许空值（便于用户清空）、合法数字（0 ≤ num ≤ 1）
if (input.value === '' || (num >= 0 && num <= 1 && !isNaN(num))) {
setValue(input.value);
input.setCustomValidity(''); // 清除错误状态
} else {
input.setCustomValidity('请输入 0 到 1 之间的数字（例如：0.35、1、0.001）');
input.reportValidity(); // 主动触发校验提示
}
};
return (
<input
type="number"
step="any" // 关键：允许任意精度小数（否则默认 step=1 会禁用小数点）
value={value}
onInput={handleInput}
placeholder="0.0 – 1.0"
aria-label="电价（€/kWh）"
/>
);
};
export default FloatInputInRange;✅ 校验覆盖场景说明：
- 0.1111 → ✅ 合法浮点数
- 1 → ✅ 整数 1 在范围内
- 0 → ✅ 起始边界合法
- 1.0 → ❌ 超出上限（因 1.0 > 1 不成立？注意：1.0 === 1 是 true，但需确保字符串解析无歧义；实际 Number("1.0") === 1，故应允许。若业务要求严格禁止尾随 .0，需额外正则校验 ^0(\.\d*[1-9])?|1$，但通常无需）
- 111 / 000.00 / 1.01 → ❌ 触发浏览器红色提示
⚠️ 注意事项：
- type="number" 在部分移动端可能显示数字键盘，但 不保证完全屏蔽非数字字符（如长按可粘贴 1e3）；因此必须配合 Number() + 范围判断。
- step="any" 是必需属性，否则 step="1"（默认）将阻止用户输入小数点。
- onInput 优于 onChange：实时响应，包括鼠标拖拽、滚轮、粘贴等所有修改行为。
- 若集成到 TextField（如 MUI），可通过 inputProps={{ step: 'any', onInput: handler }} 透传原生属性。
总结：优先利用 HTML5 原生能力，辅以轻量 JS 校验，比纯前端正则拦截更健壮、更可访问（a11y）、更易维护。
