当前位置：首页 > React

react中如何限制用户输入

2026-01-25 15:19:37React

限制用户输入的方法

在React中，可以通过多种方式限制用户输入，确保输入内容符合预期格式或范围。以下是几种常见的方法：

使用受控组件

通过value和onChange属性控制输入值，在事件处理函数中对输入进行验证或过滤：

function ControlledInput() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    // 只允许数字输入
    const filteredValue = e.target.value.replace(/[^0-9]/g, '');
    setInputValue(filteredValue);
  };

  return <input value={inputValue} onChange={handleChange} />;
}

使用正则表达式验证

在提交表单或失焦时验证输入内容：

function ValidatedInput() {
  const [inputValue, setInputValue] = useState('');
  const [error, setError] = useState('');

  const validateInput = (value) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(value)) {
      setError('请输入有效的邮箱地址');
    } else {
      setError('');
    }
  };

  return (
    <>
      <input 
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        onBlur={() => validateInput(inputValue)}
      />
      {error && <div style={{color: 'red'}}>{error}</div>}
    </>
  );
}

设置输入属性

利用HTML5原生输入限制：

<input 
  type="number" 
  min="0" 
  max="100" 
  step="1"
/>

使用第三方库

如react-hook-form配合验证库：

import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

const schema = yup.object().shape({
  username: yup.string().required().min(3),
});

function Form() {
  const { register, handleSubmit, errors } = useForm({
    resolver: yupResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit(console.log)}>
      <input name="username" ref={register} />
      {errors.username && <p>{errors.username.message}</p>}
    </form>
  );
}

常见限制场景实现

限制输入长度

<input 
  maxLength={10}
  value={inputValue}
  onChange={(e) => setInputValue(e.target.value.slice(0, 10))}
/>

禁止特殊字符

const handleChange = (e) => {
  const filteredValue = e.target.value.replace(/[!@#$%^&*()]/g, '');
  setInputValue(filteredValue);
};

自动格式化输入

如电话号码格式化：

const formatPhone = (value) => {
  const numbers = value.replace(/\D/g, '');
  if (numbers.length <= 3) return numbers;
  if (numbers.length <= 6) return `${numbers.slice(0, 3)}-${numbers.slice(3)}`;
  return `${numbers.slice(0, 3)}-${numbers.slice(3, 6)}-${numbers.slice(6, 10)}`;
};

const handleChange = (e) => {
  setInputValue(formatPhone(e.target.value));
};

react中如何限制用户输入