required属性仅在原生表单提交时触发空值校验,阻止提交并提示;不监听输入、不响应JS提交、不干预跳转,且依赖语义化form结构和submit按钮。

required 属性的作用不是“让字段变必填”,而是告诉浏览器:当用户通过原生表单提交(比如点 type="submit" 按钮或回车)时,请在提交前检查该字段是否为空;若空,就阻止提交并弹出默认提示。
required 只在原生表单提交时触发验证
它不监听输入、不响应 JS 提交、不干预页面跳转逻辑——只绑定在 form 元素的 submit 事件上。
- 如果用
fetch()或axios.post()手动发请求,required完全不生效,也不会报错、不会提示 - 如果表单里用了
event.preventDefault(),又没手动调form.checkValidity(),那验证就被静默绕过了 - 移动端软键盘回车键一般会触发表单提交,但某些 WebView(如旧版微信内置浏览器)可能忽略
required,需额外用 JS 补充判断
required 生效的前提是语义化表单结构
它不是独立可用的“装饰属性”,必须依附于完整的表单上下文才能被浏览器识别。
- 输入控件必须包裹在
内,不能只是零散的 - 提交按钮必须是
或,type="button"不会触发验证 -
和同样支持required,但空(如)会被视为未选中,从而触发验证
required 的错误提示不能直接覆盖,必须配合状态重置
用 setCustomValidity() 自定义提示时,容易卡在“永远报错”的状态,因为它的校验结果是持久化的。
- 设
input.setCustomValidity("不能为空")后,哪怕用户后续输进内容,只要没清空状态,依然算无效 - 正确做法是在
input或blur事件中,先判断当前值是否合法,再决定调setCustomValidity('')(通过)还是setCustomValidity("提示文本")(失败) -
setCustomValidity("")和setCustomValidity(null)效果不同:null不起作用,""才表示“通过”
最容易被忽略的是:required 的验证时机和作用域非常狭窄——它只管“空不空”,不管“对不对”;只在“原生 submit”那一刻起作用,其余时间形同虚设。想做更细粒度控制,就得靠 JS 补位,而不是指望它包打天下。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











