为默认大小验证实现验证消息

import React, { useState } from 'react';

function Form() {
  const [username, setUsername] = useState('');
  const [error, setError] = useState('');

  const validateUsername = (value) => {
    if (value.length < 3 || value.length > 20) {
      return '用户名长度必须在3到20个字符之间';
    }
    return '';
  };

  const handleChange = (e) => {
    const { value } = e.target;
    setUsername(value);
    setError(validateUsername(value));
  };

  return (
    <div>
      <input
        type="text"
        value={username}
        onChange={handleChange}
        placeholder="请输入用户名"
      />
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  );
}

export default Form;