表单验证体系

6.4 表单验证体系表单验证是保障输入数据合法性、规范性与业务正确性的核心环节是表单交互的第一道防线。完整的验证体系涵盖格式校验、业务校验、分层触发机制与原生API能力通过正则表达式实现规则匹配结合实时校验与提交校验的双层策略配合浏览器原生验证API能够构建体验流畅、管控严格的表单校验体系。6.4.1 正则表达式基础正则表达式RegExp是表单验证的核心规则引擎通过特定的语法模式匹配字符串格式能够精准判断输入内容是否符合规范是绝大多数格式类校验的实现基础。一、核心作用格式合法性校验判断输入是否符合指定格式如手机号、邮箱、身份证字符范围限制限制输入的字符类型如仅允许字母数字、仅中文长度与规则匹配校验复杂度规则如密码强度、编码规则二、表单验证常用语法1. 基础元字符元字符含义典型用法\d匹配任意数字等价于 [0-9]数字类校验\w匹配字母、数字、下划线等价于 [a-zA-Z0-9_]用户名、编码校验\s匹配任意空白字符空格、制表符等空白检测.匹配除换行符外的任意字符通用匹配[abc]匹配方括号内任意单个字符限定字符范围[^abc]匹配不在方括号内的任意单个字符排除非法字符()分组将多个字符作为整体组合规则、提取内容或匹配左右任意一个表达式2. 量词量词含义典型用法匹配前面的规则1次或多次非空内容校验*匹配前面的规则0次或多次可选内容校验?匹配前面的规则0次或1次可选字段、前缀后缀可选{n}精确匹配n次固定长度校验{n,m}匹配n到m次长度范围校验{n,}至少匹配n次最小长度校验3. 边界符^匹配字符串开始位置限定开头$匹配字符串结束位置限定结尾表单校验必须加首尾边界避免部分匹配导致校验失效。例如仅用\d{11}会匹配包含11位数字的任意字符串加^\d{11}$才是严格11位纯数字。4. 修饰符i忽略大小写不区分大小写匹配三、常用校验方法// 1. test()最常用返回布尔值判断是否匹配 const phoneReg /^1[3-9]\d{9}$/; console.log(phoneReg.test(13800138000)); // true // 2. match()返回匹配结果数组不匹配返回null const str abc123; const numMatch str.match(/\d/); // [123]6.4.2 常用校验规则集合整理国内业务场景最常用的表单校验正则规则覆盖绝大多数通用输入场景。校验项正则表达式规则说明国内手机号/^1[3-9]\d{9}$/1开头第二位3-9共11位纯数字邮箱地址/^[a-zA-Z0-9._%-][a-zA-Z0-9.-]\.[a-zA-Z]{2,}$/标准邮箱格式用户名域名.后缀18位身份证号/^[1-9]\d{5}(1920)\d{2}(0[1-9]用户名/^[a-zA-Z][a-zA-Z0-9_]{3,15}$/字母开头4-16位字母数字下划线强密码/^(?.*[a-z])(?.*[A-Z])(?.*\d)(?.*[$!%*?])[A-Za-z\d$!%*?]{8,20}$/8-20位包含大小写字母、数字、特殊字符纯中文/^[\u4e00-\u9fa5]$/仅允许中文字符URL地址/^https?:\/\/[^\s]$/http或https开头的网址普通车牌号/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼][A-Z][A-Z0-9]{5,6}$/国内普通民用车牌正整数/^[1-9]\d*$/大于0的整数金额两位小数/^([1-9]\d*0)(.\d{1,2})?$/注意正则校验为格式层面校验仅保证格式合规真实业务有效性如手机号是否真实存在、身份证是否合法需服务端二次校验。6.4.3 实时校验与提交校验表单验证采用「实时校验做体验、提交校验做把关」的双层策略不同时机执行不同粒度的校验兼顾交互体验与数据准确性。一、实时校验核心定位输入过程中即时反馈轻量快速优先校验格式与本地可判断规则减少用户提交时的错误挫败感。触发时机轻量校验input 事件实时触发如字数统计、非法字符检测重量校验防抖 200~300ms 后触发如远程唯一性校验、复杂格式校验补充校验blur 失焦时强制执行一次确保用户快速离开时完成校验校验范围单字段格式校验、长度校验、字符类型校验本地可判断的规则校验轻量业务逻辑校验二、提交校验核心定位表单提交前的最终全量校验是数据合法性的最后一道防线确保所有字段全部符合规范才能提交。触发时机表单 submit 事件中提交请求之前执行点击提交按钮时触发校验范围全字段必填校验、格式校验字段间联动校验如确认密码与密码一致、结束时间晚于开始时间复杂业务规则校验提交前最终状态确认三、分层校验最佳实践// 校验规则配置 const rules { username: { required: true, pattern: /^[a-zA-Z][a-zA-Z0-9_]{3,15}$/, message: 字母开头4-16位字母数字下划线 }, password: { required: true, minLength: 6, message: 密码长度不能少于6位 } }; // 单字段校验函数 function validateField(field) { const rule rules[field.name]; const value field.value.trim(); // 必填校验 if (rule.required !value) { showError(field, 该项为必填项); return false; } // 格式校验 if (rule.pattern value !rule.pattern.test(value)) { showError(field, rule.message); return false; } // 长度校验 if (rule.minLength value.length rule.minLength) { showError(field, rule.message); return false; } clearError(field); return true; } // 1. 实时校验输入时校验单字段 document.querySelectorAll(input).forEach(input { input.addEventListener(input, () { validateField(input); }); }); // 2. 提交校验全量校验 const form document.querySelector(#form); form.addEventListener(submit, (e) { e.preventDefault(); // 遍历所有字段校验 let isValid true; document.querySelectorAll(input).forEach(input { if (!validateField(input)) { isValid false; } }); if (isValid) { // 执行提交 console.log(校验通过提交表单); } });四、校验状态管理统一错误提示容器每个字段对应独立的错误提示区域维护表单整体校验状态控制提交按钮的禁用/启用错误状态分级警告、错误不同级别不同视觉反馈6.4.4 原生表单验证 APIHTML5 提供了原生的约束验证 APIConstraint Validation通过标签属性声明校验规则浏览器自动执行校验与提示无需额外编写校验逻辑适合简单表单快速实现。一、原生校验属性直接在表单控件标签上添加浏览器内置校验逻辑属性适用控件作用说明required所有输入控件必填校验不能为空pattern文本类输入正则表达式校验不符合则阻止提交minlength / maxlength文本类输入最小/最大字符长度校验min / max数值、日期类输入最小/最大值校验typeemail / typeurl文本输入原生邮箱/URL格式校验示例form input typeemail nameemail required placeholder请输入邮箱 input typetext namephone required pattern^1[3-9]\d{9}$ placeholder请输入手机号 button typesubmit提交/button /form提交时浏览器会自动校验不通过则弹出原生提示气泡阻止表单提交。二、JavaScript 验证 API通过脚本主动控制验证、获取验证状态、自定义错误提示。1. 核心方法checkValidity()手动执行校验返回布尔值表示是否校验通过setCustomValidity(message)设置自定义错误信息传入空字符串则清除错误2. 核心属性validity元素的validity属性返回校验状态对象包含各类校验结果valid整体是否通过校验valueMissing是否缺失必填值patternMismatch是否不符合正则规则tooLong / tooShort是否超出/不足长度typeMismatch是否不符合类型格式如邮箱格式错误customError是否存在自定义错误3. 自定义错误提示示例const phoneInput document.querySelector(#phone); phoneInput.addEventListener(input, () { if (!/^1[3-9]\d{9}$/.test(phoneInput.value)) { // 设置自定义错误 phoneInput.setCustomValidity(请输入正确的11位手机号); } else { // 清除错误 phoneInput.setCustomValidity(); } });三、原生验证的优缺点维度说明优势原生浏览器支持零额外依赖实现简单声明式配置默认提供统一的错误提示与无障碍支持局限错误提示样式不可自定义各浏览器表现不一致复杂联动校验、业务校验支持弱校验时机不可控仅提交时触发适用场景简单表单、快速原型、后台内部系统四、关闭原生验证不需要原生验证时给 form 标签添加 novalidate 属性关闭浏览器默认校验完全使用自定义校验逻辑form novalidate !-- 完全使用自定义校验逻辑 -- /form