React JS输入框验证：字符长度限制及特殊字符禁用示例请求

下面是一个实现了最小字符数、最大字符数限制，同时禁止输入特殊字符的React函数组件示例：

import { useState } from 'react';

const ValidatedInput = () => {
  // 配置验证规则
  const VALIDATION_RULES = {
    minLength: 3,
    maxLength: 15,
    allowedChars: /^[a-zA-Z0-9\s]*$/ // 允许字母、数字、空格，可按需调整
  };

  const [inputValue, setInputValue] = useState('');
  const [errorMessage, setErrorMessage] = useState('');

  const handleInputChange = (e) => {
    let newValue = e.target.value;
    
    // 过滤特殊字符：移除所有不符合规则的字符
    if (!VALIDATION_RULES.allowedChars.test(newValue)) {
      newValue = newValue.replace(/[^a-zA-Z0-9\s]/g, '');
    }

    // 验证字符长度
    let error = '';
    if (newValue.length < VALIDATION_RULES.minLength) {
      error = `最少需要输入${VALIDATION_RULES.minLength}个字符`;
    } else if (newValue.length > VALIDATION_RULES.maxLength) {
      error = `最多只能输入${VALIDATION_RULES.maxLength}个字符`;
    }

    // 更新状态
    setInputValue(newValue);
    setErrorMessage(error);
  };

  return (
    <div style={{ padding: '20px', maxWidth: '400px' }}>
      <label htmlFor="validated-input">输入内容：</label>
      <input
        id="validated-input"
        type="text"
        value={inputValue}
        onChange={handleInputChange}
        placeholder={`请输入${VALIDATION_RULES.minLength}-${VALIDATION_RULES.maxLength}个字符，仅支持字母、数字、空格`}
        style={{
          width: '100%',
          padding: '8px',
          marginTop: '8px',
          border: errorMessage ? '1px solid #dc3545' : '1px solid #ced4da',
          borderRadius: '4px'
        }}
      />
      {errorMessage && (
        <p style={{ color: '#dc3545', marginTop: '8px', marginBottom: 0 }}>
          {errorMessage}
        </p>
      )}
    </div>
  );
};

export default ValidatedInput;

关键逻辑说明 #

• 特殊字符过滤：通过正则表达式匹配非允许字符，直接用replace移除，确保输入框不会显示违规字符。
• 字符数验证：每次输入变更时实时检查长度，超出范围立即更新错误提示。
• 受控组件：用useState管理输入值，完全由React控制输入状态，避免非预期行为。

自定义调整 #

• 允许的字符可修改allowedChars正则，比如要支持下划线可改为/^[a-zA-Z0-9\s_]*$/。
• 字符数限制直接修改VALIDATION_RULES里的minLength和maxLength数值即可。
• 错误提示样式可根据项目UI规范自定义修改。

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