HTML5表单验证可通过required、type、pattern属性及JavaScript的checkValidity()和setCustomValidity()方法实现。required强制非空，type校验格式，pattern匹配正则，checkValidity()手动检测有效性，setCustomValidity()自定义错误提示。
如果您在HTML5页面中需要确保用户输入的数据符合基本要求，可以通过原生HTML5属性或JavaScript实现表单验证。以下是几种可行的验证方式：
一、使用required属性强制非空校验
required属性是HTML5内置的布尔属性，用于声明某个表单控件为必填项。当用户提交表单时，若该字段为空，浏览器会自动阻止提交并显示默认提示。
1、在、
2、例如：。
立即学习“前端免费学习笔记（深入）”；
3、尝试提交空值时，浏览器将弹出原生提示且不触发submit事件。
二、使用type属性触发类型校验
HTML5扩展了input元素的type取值，如email、url、number、date等，浏览器会依据type自动校验输入格式是否合法。
1、将input的type设为email：。
2、输入不符合邮箱格式的内容（如“abc”）后提交，浏览器会拒绝提交并高亮显示错误状态。
3、对number类型，可进一步添加min、max、step属性限制数值范围。
三、使用pattern属性配合正则表达式校验
pattern属性允许开发者指定一个JavaScript风格的正则表达式，用于验证输入值是否匹配指定格式。该属性仅对text、search、url、tel、email、password类型有效。
1、在input标签中添加pattern属性，例如：。
2、title属性用于定义校验失败时显示的提示文本。
3、用户输入不满足正则时，表单无法提交，且焦点会停留在该字段。
四、使用JavaScript调用checkValidity()方法手动校验
checkValidity()是HTML5表单控件的原生方法，返回布尔值表示当前字段是否通过所有约束校验。可用于在提交前主动检测或响应式反馈。
1、获取目标input元素：const input = document.querySelector('input[name="phone"]');。
2、调用input.checkValidity()，返回true表示合法，false表示非法。
3、结合addEventListener监听input或blur事件，实时调用checkValidity()并根据返回值更新UI样式。
五、使用JavaScript设置setCustomValidity()自定义错误消息
setCustomValidity()允许覆盖浏览器默认的验证错误提示，提供更精准的业务语义化反馈。传入空字符串表示恢复为有效状态。
1、在input上绑定input事件：。
2、获取元素后判断值是否为数字且在合理范围内：if (value 120) { input.setCustomValidity("年龄必须在1到120之间"); } else { input.setCustomValidity(""); }。
3、调用setCustomValidity非空字符串后，checkValidity()将返回false，且提交被阻止。
