如何限制input标签仅允许修改小数点后的数字（基于react-hook-form）

数据老陈

2026-8-12

解决方案

要实现始终保留0.前缀、仅允许修改小数点后数字的需求，你可以直接修改onChange的处理逻辑，配合react-hook-form的表单规则来实现，修改后的代码如下：

import { useForm } from "react-hook-form";

// 组件内的表单初始化
const { register, setValue, formState: { errors } } = useForm({
  defaultValues: {
    version: "0." // 初始值设为0.，确保前缀存在
  }
});

// 渲染输入框
<input
  type="text"
  {...register("version", {
    pattern: {
      value: /^0\.\d*$/,
      message: "请输入0.xxx格式的版本号"
    }
  })}
  onChange={(e) => {
    // 只保留输入中的数字字符
    const numericPart = e.target.value.replace(/[^0-9]/g, "");
    // 强制拼接固定前缀和数字部分
    const formattedValue = `0.${numericPart}`;
    // 更新表单值并触发验证
    setValue("version", formattedValue, { shouldValidate: true });
  }}
  className={`form-control project-form-control rounded-0 input-digga2 ${errors.version ? "is-invalid" : ""}`}
  name="version"
/>

关键逻辑说明

初始值兜底：表单初始化时给version设置"0."，保证输入框一开始就有正确的前缀，不会出现空值或错误格式。
输入过滤修正：不管用户输入什么内容，先把非数字的字符全部过滤掉，只保留数字部分，再拼回0.后面——就算用户试图删除前缀、输入字母或符号，最终都会被修正成符合要求的格式。
精准验证规则：把register里的验证规则改成/^0\.\d*$/，精准匹配0.开头加任意数字的格式，还能自定义错误提示文案。
实时验证反馈：调用setValue时添加shouldValidate: true参数，每次修改值后立刻触发表单验证，错误状态会实时同步到输入框的样式上。