第14篇表单验证与属性用户输入的数据五花八门——空值、错误格式、超出范围……HTML5 提供了原生验证机制不依赖 JavaScript 就能在提交前拦截错误数据。学习目标掌握 HTML5 验证属性required、pattern、min/max、minlength/maxlength理解 CSS 验证伪类:valid、:invalid、:required、:optional学会使用novalidate关闭原生验证了解自定义验证提示的方法和限制能够构建带有前端验证的完整表单核心知识点一、必填验证required最简单的验证字段必须填写。labelforusername用户名 */labelinputtypetextidusernamenameusernamerequired对哪些控件有效控件required 效果input(大多数 type)必须输入值textarea必须输入内容select必须选择一项非空 optioninput typecheckbox必须勾选input typeradio同组必须选一个input typefile必须选择文件!-- 复选框必须同意协议才能提交 --labelinputtypecheckboxnameagreerequired我已阅读并同意服务条款/label二、正则验证patternpattern用正则表达式定义输入格式。!-- 用户名3-15 位字母、数字或下划线 --labelforusername用户名/labelinputtypetextidusernamenameusernamepattern^[a-zA-Z0-9_]{3,15}$title3-15 位字母、数字或下划线required常用 pattern 示例场景Pattern说明手机号中国^1[3-9]\d{9}$11 位1 开头邮编^\d{6}$6 位数字身份证号^\d{17}[\dXx]$18 位用户名^[a-zA-Z0-9_]{3,15}$3-15 位字母数字下划线中文姓名^[一-龥]{2,8}$2-8 个汉字!-- 手机号验证 --labelforphone手机号/labelinputtypetelidphonenamephonepattern^1[3-9]\d{9}$placeholder13800138000title请输入 11 位手机号码required!-- 密码至少 8 位包含大小写字母和数字 --labelforpassword密码/labelinputtypepasswordidpasswordnamepasswordpattern^(?.*[a-z])(?.*[A-Z])(?.*\d).{8,}$title至少 8 位包含大小写字母和数字requiredtitle属性的作用当验证失败时浏览器会显示title的内容作为提示信息。⚠️注意pattern只验证格式不验证内容真实性如手机号是否真实存在。三、范围验证min、max、step用于数值、日期等可比较大小的输入。!-- 年龄18-120 岁 --labelforage年龄/labelinputtypenumberidagenameagemin18max120required!-- 日期2024 年内 --labelforevent-date活动日期/labelinputtypedateidevent-datenameevent-datemin2024-01-01max2024-12-31required!-- 范围滑块音量 0-100步长 5 --labelforvolume音量/labelinputtyperangeidvolumenamevolumemin0max100step5value50各输入类型的 min/max 格式typemin/max 格式示例number数字min0 max100dateYYYY-MM-DDmin2024-01-01timeHH:MMmin09:00 max18:00datetime-localYYYY-MM-DDTHH:MMmin2024-06-01T00:00monthYYYY-MMmin2024-01weekYYYY-WNNmin2024-W01range数字min0 max100四、长度验证minlength和maxlength限制输入内容的字符长度。!-- 用户名3-20 个字符 --labelforusername用户名/labelinputtypetextidusernamenameusernameminlength3maxlength20required!-- 评论最多 500 字 --labelforcomment评论/labeltextareaidcommentnamecommentminlength10maxlength500placeholder至少 10 个字最多 500 字required/textareaminlength vs patternminlength/maxlengthpattern验证内容字符数量格式规则复杂度简单灵活正则使用场景长度限制格式匹配!-- 组合使用用户名长度为 3-15且只能包含字母数字 --inputtypetextnameusernameminlength3maxlength15pattern^[a-zA-Z0-9]$title3-15 位字母或数字required五、CSS 验证伪类根据验证状态自动应用样式无需 JavaScript。/* 必填字段的 label 加红色星号 */label:has( [required])::after{content: *;color:#e53935;}/* 验证通过的输入框 */input:valid{border-color:#43a047;}/* 验证失败的输入框 */input:invalid{border-color:#e53935;}/* 必填字段 */input:required{background-color:#fff8e1;}/* 可选字段 */input:optional{background-color:#ffffff;}/* 聚焦时去掉红色边框避免用户刚开始输入就显示错误 */input:focus:invalid{border-color:#ff9800;}验证伪类一览伪类匹配条件:valid值通过验证:invalid值未通过验证:required有 required 属性:optional无 required 属性:in-range值在 min/max 范围内:out-of-range值超出 min/max 范围:checked单选/复选框被选中:disabled控件被禁用六、自定义验证提示使用title属性inputtypetextpattern^[a-z]$title只能输入小写字母!-- 验证失败时浏览器显示只能输入小写字母 --使用setCustomValidity()JavaScriptformlabelforpassword密码/labelinputtypepasswordidpasswordnamepasswordrequiredlabelforconfirm确认密码/labelinputtypepasswordidconfirmnameconfirmrequiredbuttontypesubmit注册/button/formscriptconstpassworddocument.getElementById(password);constconfirmdocument.getElementById(confirm);confirm.addEventListener(input,(){if(confirm.value!password.value){confirm.setCustomValidity(两次输入的密码不一致);}else{confirm.setCustomValidity();// 清空错误提示}});/script使用reportValidity()手动触发验证constformdocument.querySelector(form);constisValidform.reportValidity();// 返回 true/false同时显示提示七、关闭原生验证novalidate当需要使用自定义验证逻辑如 JavaScript 框架时可以关闭 HTML5 原生验证。!-- novalidate 禁用整个表单的原生验证 --formaction/submitmethodPOSTnovalidateinputtypeemailnameemailrequiredbuttontypesubmit提交/button!-- 此时 required 不会阻止提交需自行用 JS 验证 --/formformnovalidate单个按钮forminputtypeemailnameemailrequired!-- 这个按钮提交时不验证 --buttontypesubmitformnovalidate保存草稿/button!-- 这个按钮提交时正常验证 --buttontypesubmit正式提交/button/form八、完整示例带验证的注册表单formaction/registermethodPOSTfieldsetlegend账户信息/legendlabelforreg-username用户名 */labelinputtypetextidreg-usernamenameusernameminlength3maxlength15pattern^[a-zA-Z0-9_]$title3-15 位字母、数字或下划线requiredlabelforreg-email邮箱 */labelinputtypeemailidreg-emailnameemailplaceholderyournameexample.comrequiredlabelforreg-password密码 */labelinputtypepasswordidreg-passwordnamepasswordminlength8pattern^(?.*[a-z])(?.*[A-Z])(?.*\d).$title至少 8 位包含大小写字母和数字requiredlabelforreg-phone手机号/labelinputtypetelidreg-phonenamephonepattern^1[3-9]\d{9}$title11 位手机号码placeholder13800138000/fieldsetfieldsetlegend个人信息/legendlabelforreg-age年龄 */labelinputtypenumberidreg-agenameagemin18max120requiredlabelforreg-bio个人简介/labeltextareaidreg-bionamebiomaxlength200placeholder最多 200 字/textarea/fieldsetlabelinputtypecheckboxnameagreerequired我已阅读并同意ahref/terms服务条款/a*/labelbuttontypesubmit注册/button/form 完整代码文件CODE/14/form-validation.html动手练习练习 1验证属性匹配为以下需求选择合适的验证属性需求属性字段不能为空输入必须是邮箱格式年龄必须在 18-60 之间用户名长度为 4-20 个字符手机号必须是 11 位数字密码必须包含至少一个大写字母练习 2登录表单验证创建一个登录表单包含以下验证邮箱typeemail必填密码typepassword至少 6 位必填使用 CSS 给:invalid状态添加红色边框使用title提供验证失败提示练习 3复杂注册表单创建一个包含以下验证的注册表单用户名pattern限制为字母数字3-15 位邮箱typeemail必填密码minlength8pattern要求包含大小写字母和数字确认密码用 JavaScript 验证两次输入一致年龄typenumbermin18max120协议同意复选框required常见误区 ⚠️误区真相“前端验证就够了”❌ 前端验证可被绕过必须配合服务器端验证“pattern会阻止所有无效输入”pattern只在提交时验证用户输入过程中不阻止“:invalid样式会一直在”页面加载后空必填字段也会显示:invalid建议配合:not(:placeholder-shown)“minlength可以代替pattern”两者功能不同minlength只检查长度pattern检查格式“novalidate会移除 required 属性”不会它只是禁用验证行为required 属性仍在“所有浏览器都支持相同的验证提示样式”浏览器默认的验证提示样式各不相同且难以自定义“typeemail验证很严格”实际上很宽松ab也能通过。生产环境需要更严格的验证“验证失败时表单不会提交”默认是这样但可以通过 JavaScript 拦截和自定义处理速查卡片 验证属性速查属性作用适用控件required必填大多数pattern正则格式验证text, tel, email, password, urlmin/max数值/日期范围number, range, date, time 等minlength/maxlength字符长度text, password, textarea, emailstep数值步长number, range, date, time常用正则 Pattern场景Pattern手机号^1[3-9]\d{9}$6 位数字^\d{6}$用户名^[a-zA-Z0-9_]{3,15}$强密码^(?.*[a-z])(?.*[A-Z])(?.*\d).{8,}$中文^[一-龥]$CSS 验证伪类input:valid{}/* 验证通过 */input:invalid{}/* 验证失败 */input:required{}/* 必填 */input:optional{}/* 可选 */input:in-range{}/* 在范围内 */input:out-of-range{}/* 超出范围 */input:focus:invalid{}/* 聚焦且无效建议用这个避免初始错误状态 */自定义验证模板constinputdocument.getElementById(field);input.addEventListener(input,(){if(条件不满足){input.setCustomValidity(错误提示信息);}else{input.setCustomValidity();// 清空错误}});表单验证 checklist必填字段标记了required格式要求用了patterntitle数值范围用了min/max长度限制用了minlength/maxlength提供了清晰的title提示有服务器端二次验证防绕过验证失败的样式提示用户友好扩展阅读MDN: 表单数据验证MDN: input 验证相关属性MDN: CSS 伪类 :valid :invalidMDN: setCustomValidity()下一步表单控件全部掌握后进入 第15篇容器与布局标签学习 HTML5 语义化容器搭建页面骨架。