浏览器原生校验可绕过:用formnovalidate属性(仅按钮有效)、改input为type="text"、调用form.submit()方法、移除required/pattern属性;但服务端仍须严格校验。

浏览器默认会对 type="email、type="url"、type="number" 等输入框执行格式校验,提交时若不合法会阻断并弹出提示。想跳过它,不是“禁用验证”,而是让浏览器**不触发原生校验逻辑**——关键在绕过校验触发条件,而非删除属性。
给 input 加 formnovalidate 属性(仅对提交按钮有效)
这个属性只作用于 type="submit" 或 type="image" 按钮,表示“点击此按钮时,整个表单跳过所有客户端验证”。它不会影响其他按钮,也不改变字段本身的行为。
-
formnovalidate必须加在按钮上,不能加在input或form上 - 同一表单可同时存在带
formnovalidate和不带的按钮,实现“保存草稿”和“正式提交”分流 - 它跳过的是整个表单的
checkValidity()调用,包括required、pattern、类型格式等所有原生校验
示例:<button type="submit" formnovalidate>暂存</button>
把 input 的 type 改成 text
浏览器只对特定 type 值(如 email、url、number)启用格式校验。只要设为 type="text",即使值明显不符合邮箱格式,也不会被拦住。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 这是最彻底的“跳过”,但代价是失去浏览器自带的软键盘优化(如邮箱键盘的 @ 符号)、自动纠错、以及语义化提示
- 若后端仍需格式校验,必须确保服务端逻辑不依赖前端
type值做判断 - 注意:不要混用
type="text"和pattern——pattern在type="text"下依然生效,可能造成意外拦截
调用 form.submit() 而非点击按钮
直接调用表单元素的 submit() 方法,**不会触发任何原生验证**。这是规范明确规定的:只有用户交互(点击 submit 按钮、按回车等)才会触发 checkValidity()。
- 适用于需要 JS 控制提交时机的场景,比如先发 AJAX 保存草稿,再真正提交
- 注意:这会绕过所有
required、minlength、pattern等,连setCustomValidity("")设置的自定义错误也会被忽略 - 常见坑:在事件监听里写
event.preventDefault(); form.submit();是有效的,但别误写成form.dispatchEvent(new Event("submit"))—— 这个会触发校验
移除或动态控制 required 和 pattern
required 和 pattern 是显式触发校验的开关。它们不依赖 type,删掉就没了。
- 用
element.removeAttribute("required")或element.required = false可即时关闭必填校验 -
pattern属性一旦移除,正则校验立即失效;设为空字符串pattern=""不等于移除,部分浏览器仍会校验空值 - 注意:修改这些属性后,已存在的无效状态(如
element.validity.valid === false)不会自动重置,需手动调用element.setCustomValidity("")清除
真正容易被忽略的是:跳过客户端验证 ≠ 数据可信。所有绕过都只影响前端体验,服务器收到的数据仍需完整清洗和校验,否则会直接暴露业务逻辑漏洞。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










