Next.js(.jsx)中input输入限制不生效、表单强制提交如何修复

HTML原生表单校验（required/minLength/pattern等规则）只会在表单触发submit事件时自动执行，你当前直接在提交按钮的onClick事件中绑定数据写入逻辑，点击按钮时会优先执行绑定的writeUserData方法，完全绕开了表单的原生校验流程，因此无论输入内容是否符合规则，都会直接提交写入数据。

• 将数据提交逻辑从按钮的onClick迁移到<form>标签的onSubmit事件回调中，回调内首先调用e.preventDefault()阻止表单默认的页面刷新跳转行为。
• 移除提交按钮上绑定的onClick事件，仅保留type="submit"属性即可。点击该按钮时浏览器会自动执行所有配置的原生校验规则，只有全部校验通过后，才会执行onSubmit中定义的写入逻辑。
• 额外修复你代码里的样式拼写错误：按钮class中的actve:bg-slate-200应为active:bg-slate-200，否则点击态样式不生效。

修复后的完整核心代码如下：

if (!Boolean(userToken))
  return (
    <>
      <div>
        <p className="">address: {address}</p>
      </div>
      <div
        id="form"
        className="absolute p-10 transform -translate-x-1/2 -translate-y-1/2 border-2 rounded-md shadow-lg top-1/3 left-1/2 "
      >
        <h2 className="flex p-5 text-2xl font-semibold"> Link Username </h2>
        <form 
          className=""
          onSubmit={(e) => {
            // 阻止表单默认跳转刷新行为
            e.preventDefault()
            // 校验通过后才执行数据写入
            writeUserData(address, userName)
          }}
        >
          <input
            id="username"
            className="m-5 border-2 rounded outline-0 focus:bg-slate-100 hover:bg-slate-50"
            type="text"
            value={userName}
            onChange={(event) => setUsername(event.target.value)}
            required
            minLength="3"
            maxLength="30"
            pattern="[a-zA-Z0-9_]+"
            title="only letters, numbers, and underscores."
          />
          <button
            className="p-1 rounded hover:bg-slate-100 active:bg-slate-200"
            type="submit"
          >
            Link Name
          </button>
        </form>
      </div>
    </>
  );

补充说明：如果需要自定义校验失败的提示逻辑或样式，可以在onSubmit回调中通过e.target.checkValidity()获取表单校验结果，自行处理后续交互。

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