最小长度在我添加更改属性时不起作用

Question

我想防止使用特殊符号除了- in输入和检查最小长度和最大长度。但是当我在输入标签上添加onChange属性时，minLength属性不起作用!(maxLength可以正常工作)

有人能解决这个问题吗?

const handleNickname = (e: React.ChangeEvent<HTMLInputElement>) => {
let allowedNick = e.target.value;
allowedNick = allowedNick.replace(/ /gi, "");
allowedNick = allowedNick.replace(
/[~-+=!?@#$%₩^&*|(){}[]\/'";:<>,]/gi,
""
);
e.target.value = allowedNick;
setNick(allowedNick);
};
<form>
<input type="text" placeholder="text" required={true} minLength={2} maxLength={10} onChange={handleNickname} />
<button type="submit">Submit</button>
</form>

Answer 1

您正在手动更改值，由于某种原因，这会干扰表单提交验证器。这行断行了——e.target.value = allowedNick;制作组件控制为我解决了这个问题。

export function Test() {
const [text, setText] = useState('') // added state
const handleNickname = (e) => {

let allowedNick = e.target.value;
allowedNick = allowedNick.replace(/ /gi, "");
allowedNick = allowedNick.replace(
/[~-+=!?@#$%₩^&*|(){}[]\/'";:<>,]/gi,
""
);
setText(allowedNick) // changing state
};
return  <form>
<input type="text" placeholder="text" onChange={handleNickname} required={true} minLength={2} maxLength={10} value={text} />
<button type="submit">Submit</button>
</form>
}