React中input绑定onChange事件后minLength属性失效如何解决

• 你的输入框属于半受控状态：没有给input绑定value={nick}属性，反而直接修改e.target.value操作原生DOM，React无法同步感知DOM内容的变化，导致原生表单内置校验逻辑和实际内容不匹配，无法触发minLength校验。maxLength能正常生效是因为它的校验逻辑是原生DOM层面在输入时就会自动拦截，不受React状态同步的影响。
• 原生input的minLength校验默认仅在表单提交、输入框失焦两个时机触发，不会在输入过程中实时校验，如果你的交互需要输入中提示长度不符合，原生属性无法满足需求。

1. 修正正则规则：你当前的正则把允许保留的-也列入了替换范围，调整字符集里-的位置避免误匹配，也可以合并空格替换逻辑减少冗余代码：

// 仅替换除了-之外的特殊字符和空格
allowedNick = allowedNick.replace(/[~+=!?@#$%₩^&*|(){}\[\]\\\/'";:<>,\s]/gi, "");

2. 改成标准React受控组件写法，删除直接修改e.target.value的操作，给input绑定value属性和state关联：

import { useState } from 'react'

// 组件内逻辑
const [nick, setNick] = useState('')

const handleNickname = (e: React.ChangeEvent<HTMLInputElement>) => {
    let allowedNick = e.target.value;
    allowedNick = allowedNick.replace(/[~+=!?@#$%₩^&*|(){}\[\]\\\/'";:<>,\s]/gi, "");
    // 手动截断超过10位的内容，和maxLength效果一致避免异常
    if (allowedNick.length > 10) {
      allowedNick = allowedNick.slice(0, 10)
    }
    setNick(allowedNick);
};

// 表单渲染
<form>
  <input
    type="text"
    placeholder="text"
    required
    minLength={2}
    maxLength={10}
    value={nick}
    onChange={handleNickname}
  />
  <button type="submit">Submit</button>
</form>

3. 兜底校验方案（更可控）：如果原生minLength的触发时机不符合你的交互需求，可以直接在表单提交事件中加自定义校验，支持自定义提示内容：

const handleSubmit = (e: React.FormEvent) => {
  e.preventDefault()
  if (nick.length < 2) {
    alert('输入内容长度不能小于2位')
    return
  }
  // 此处写后续提交逻辑
}

// 给form绑定提交事件
<form onSubmit={handleSubmit}>

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