17370845950

HTML5通过input类型、required、minlength、maxlength、min、max和pattern等属性实现内置表单验证，结合placeholder和title提示，可高效完成常见前端校验，无需JavaScript。

HTML5 提供了内置的表单验证功能，无需 JavaScript 就能对用户输入进行基本校验。通过使用特定属性和正确的输入类型，浏览器会自动提示错误并阻止表单提交，直到输入符合要求。

使用正确的 input 类型触发验证

HTML5 扩展了 input 的类型，不同类型的输入会自带格式校验。例如邮箱、网址、数字等。

• email：确保输入为合法邮箱格式
• url：必须是有效网址
• number：只能输入数字，可配合 min 和 max
• tel：电话号码（无固定格式校验，但移动端会调出数字键盘）
• date：日期选择器，输入格式为 YYYY-MM-DD

使用 required 属性标记必填项

添加 required 属性后，输入框不能为空，提交时会提示用户填写。

如果用户未输入内容就提交，浏览器会弹出提示：“请填写此字段”。

限制输入长度和数值范围

通过 minlength、maxlength 和 min、max 可限制文本长度或数值大小。

• minlength="6"：文本最少6个字符
• maxlength="20"：最多20个字符
• min="1" 和 max="100"：用于 number 类型

使用 pattern 属性进行正则验证

pattern 允许用正则表达式定义自定义格式，常用于身份证、手机号等特殊格式校验。

title 中的内容会在验证失败时显示为提示信息。

其他实用属性

• placeholder：提供输入提示
• title：鼠标悬停提示，也用于 pattern 失败时的说明
• novalidate：加在 form 标签上可关闭整个表单的默认验证

基本上就这些。合理组合这些属性，就能实现大部分常见表单的前端验证需求，简单高效，兼容性也好。不复杂但容易忽略细节，比如 pattern 不支持某些 Unicode 范围写法，需测试确认。