𝗙𝗼𝗿𝗺 𝗩𝗮𝗹𝗶𝗱𝗮𝘁𝗶𝗼𝗻 𝗶𝗻 𝟮𝟬𝟮𝟲: 𝗦𝘁𝗼𝗽 𝗨𝘀𝗶𝗻𝗴 𝗟𝗶𝗯𝗿𝗮𝗿𝗶𝗲𝘀 𝗨𝗻𝗻𝗲𝗰𝗲𝘀𝘀𝗮𝗿𝗶𝗹𝘆 2026 年的表单验证：停止不必要的库的使用
在 2026 年，你不再需要沉重的 JavaScript 库来验证表单。
上个月我发布了一个结账表单，完全没有使用任何验证库。仅通过原生 HTML 和 30 行 JavaScript，它就处理了必填字段、邮箱格式和密码长度。
在运行 npm install 之前，请使用这六个原生属性来解决大部分问题：
• required: 防止文本、select 和 checkbox 的空提交。
• type: 使用 type="email" 或 type="url" 来捕捉基础的格式错误。
• minlength 和 maxlength: 无需自定义逻辑即可强制执行字符限制。
• min、max 和 step: 控制数字和日期的范围。
• pattern: 使用正则表达式来强制执行特定格式（如邮政编码）。
• inputmode 和 autocomplete: 通过显示正确的键盘或填充已知数据来减少错误。
如果原生提示信息过于笼统，请使用 Constraint Validation API。
每个 input 都有一个 validity 对象。你可以检查 valueMissing 或 typeMismatch 等属性来编写有用的错误提示。使用 setCustomValidity 来显示你自定义的文本。
请记住在 input 事件中清除你的自定义消息。否则，即使用户修复了错误，该字段仍会一直处于错误状态。
在样式方面，停止使用 JavaScript 来追踪字段是否被“触碰”（touched）。
CSS :user-invalid 伪类现在可以处理这个问题。它仅在用户与字段交互后才应用样式。将其与 :has() 选择器结合使用，即可自动显示错误文本。这可以省去数十行不必要的代码。
你到底什么时候才应该使用库？
仅在以下两种特定情况下才考虑使用库：
- 跨字段验证：当一个字段依赖于另一个字段时，例如“确认密码”或复杂的条件逻辑。
- 异步验证：当你需要检查数据库时，例如“该用户名是否已被占用？”
如果你的表单只需要单字段规则，请坚持使用原生功能。代码越少，Bug 越少。从浏览器原生功能开始，只有当浏览器达到极限时，再添加库。
Optional learning community: https://t.me/GyaanSetuAi