使用required属性可实现HTML表单必填项,浏览器自动校验input、textarea、select等元素,结合pattern可验证格式,通过setCustomValidity()自定义提示,但需注意IE低版本不支持,且必须配合后端校验。

在HTML表单中设置必填项,主要是通过 required 属性实现的。浏览器会自动对带有该属性的输入框进行验证,用户提交表单时若未填写,会提示输入内容,无需额外JavaScript代码即可完成基础校验。
使用 required 属性设置必填项
在常见的表单元素如 input、textarea、select 中添加 required 属性,即可将其设为必填项。
- 文本框(input):用户必须填写姓名、邮箱等信息
- 下拉框(select):确保用户选择一个选项
- 复选框(checkbox):常用于同意协议类场景
示例代码:
结合 pattern 属性进行格式验证
除了是否为空,有时还需要控制输入格式,比如手机号、身份证号。这时可以配合 pattern 属性使用正则表达式进行校验。
立即学习“前端免费学习笔记(深入)”;
例如限制手机号为11位数字:
如果输入不符合格式,提交时浏览器也会阻止并提示错误。
自定义错误提示信息
默认提示语由浏览器生成,不够友好。可通过JavaScript的 setCustomValidity() 方法自定义提示内容。
示例:
注意事项与兼容性
虽然 required 属性被现代浏览器广泛支持,但仍需注意以下几点:
基本上就这些。使用 required 是最简单有效的HTML表单必填项实现方式,搭配 pattern 和自定义提示能大幅提升用户体验。前端验证只是第一道防线,后端校验不可省略。











