React Form Control手动输入时如何强制限制min/max取值范围？

HTML原生input[type="number"]的min/max属性仅约束箭头步进操作和表单提交时的默认验证，手动输入超出范围的值时不会自动拦截或修正。针对React Bootstrap的Form.Control，可以通过以下几种方式实现强制验证：

方法1：实时钳制输入值（自动修正） #

通过onChange事件监听输入，将值强制限制在0-1范围内，用户输入超出范围的数值时会自动修正为边界值：

import { useState } from 'react';
import { Form } from 'react-bootstrap';

function ClampedNumberInput() {
  const [value, setValue] = useState(0);

  const handleChange = (e) => {
    let inputValue = parseFloat(e.target.value);
    // 处理空值或非数字输入
    if (isNaN(inputValue)) {
      inputValue = 0;
    }
    // 钳制值在0到1之间
    const clampedValue = Math.max(0, Math.min(1, inputValue));
    setValue(clampedValue);
  };

  return (
    <Form.Control
      type="number"
      min={0}
      max={1}
      step={0.01}
      value={value}
      onChange={handleChange}
    />
  );
}

方法2：实时验证+错误提示（引导用户修正） #

如果不想强制修改用户输入，而是通过错误提示引导用户修正，同时禁用非法状态下的提交操作：

import { useState } from 'react';
import { Form, Button } from 'react-bootstrap';

function ValidatedNumberForm() {
  const [value, setValue] = useState(0);
  const [isValid, setIsValid] = useState(true);

  const handleChange = (e) => {
    const inputValue = e.target.value;
    setValue(inputValue);
    // 实时验证数值合法性
    const numValue = parseFloat(inputValue);
    if (isNaN(numValue) || numValue < 0 || numValue > 1) {
      setIsValid(false);
    } else {
      setIsValid(true);
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const numValue = parseFloat(value);
    if (!isValid) return;
    // 执行表单提交逻辑
    console.log('合法提交值:', numValue);
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Group className="mb-3">
        <Form.Label>输入0-1之间的数值</Form.Label>
        <Form.Control
          type="number"
          min={0}
          max={1}
          step={0.01}
          value={value}
          onChange={handleChange}
          isValid={isValid}
          isInvalid={!isValid}
        />
        <Form.Control.Feedback type="invalid">
          请输入0到1范围内的有效数值
        </Form.Control.Feedback>
      </Form.Group>
      <Button type="submit" disabled={!isValid}>提交</Button>
    </Form>
  );
}

方法3：拦截非法输入（严格禁止无效内容） #

通过onInput事件直接阻止用户输入不符合规则的内容，比如超出范围的数字、多余的小数点等：

import { useState } from 'react';
import { Form } from 'react-bootstrap';

function RestrictedNumberInput() {
  const [value, setValue] = useState('0');

  const handleInput = (e) => {
    const inputValue = e.target.value;
    // 允许空值、数字、最多两位小数的格式
    const formatRegex = /^(\d+(\.\d{0,2})?)?$/;
    if (!formatRegex.test(inputValue)) {
      e.preventDefault();
      return;
    }
    // 验证数值范围
    const numValue = parseFloat(inputValue);
    if (!isNaN(numValue) && (numValue < 0 || numValue > 1)) {
      e.preventDefault();
    }
    setValue(inputValue);
  };

  return (
    <Form.Control
      type="text" // 改用text类型更易控制输入格式
      value={value}
      onInput={handleInput}
      placeholder="0-1之间，最多两位小数"
    />
  );
}

根据你的需求选择合适的方案：自动修正选方法1，友好提示选方法2，严格拦截选方法3。

内容的提问来源于stack exchange，提问作者user1981152