实名认证页面需严格实施前端校验与安全防护：身份证输入须正则预筛、分段补全及粘贴过滤；人脸采集需权限检测、主动触发与移动端降级；照片上传须格式限制、尺寸压缩与英文文件名；所有请求须https加密并携带防重放token。
实名认证页面不是“加个输入框再提交”就能上线的，尤其涉及身份证、人脸等敏感信息时，前端必须做基础校验、防误传、权限引导，否则后端会收到大量无效请求甚至触发风控拦截。
身份证号输入框必须带格式校验和实时反馈
用户手输18位身份证很容易出错，光靠后端返回 422 Unprocessable Entity 是体验灾难。前端至少要做两层防护：
- 用正则预筛格式：
/^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[Xx0-9]$/，但注意它不校验最后一位校验码，仅作初步过滤 - 监听
input事件，在用户每输一位后自动补全分段（如输入到第6位后加空格），并用setCustomValidity()绑定错误提示，让浏览器原生表单验证生效 - 禁止粘贴非数字字符：监听
paste事件，event.clipboardData.getData('text')提取纯数字后再插入
人脸采集按钮必须由用户主动触发，且要处理权限拒绝链路
navigator.mediaDevices.getUserMedia({ video: true }) 在现代浏览器中不会自动弹窗，一旦用户点过“拒绝”，后续调用直接 reject，再点按钮也不会重试。
- 首次调用前先检查权限状态：
navigator.permissions.query({ name: 'camera' })，若为denied，就隐藏摄像头区域，只显示引导文案：“请在浏览器地址栏点击锁形图标，开启摄像头权限” - 移动端 fallback 必须写死：
{ video: { facingMode: 'user' } }在部分安卓微信里不生效，要降级为{ video: true }并手动加提示“请将手机前置摄像头对准脸部” - 不要在
DOMContentLoaded里自动调用，必须绑定到明确按钮，比如id="start-face-verify"
上传身份证照片得限制尺寸、格式和文件名编码
用户从手机相册选图时，常出现超大图（5MB+）、HEIC 格式（iOS 默认）、中文文件名乱码等问题，后端解析失败率极高。
- HTML input 加属性：
<input type="file" accept="image/jpeg,image/png" capture="environment">，强制限定格式并唤起后置摄像头 - JS 读取
File对象后，用canvas压缩到宽度 ≤ 1200px、质量 0.8，再转成blob上传，避免原始图过大 - 服务端若报
400 Bad Request且响应体含 “filename encoding error”，说明前端没处理好中文名——上传时用FormData.append('idcard_front', blob, 'idcard_front.jpg')显式指定英文文件名
所有敏感操作必须 HTTPS + Token 防重放
哪怕只是把身份证号发到自己后端，HTTP 明文传输也违反《个人信息保护法》第51条。更隐蔽的问题是：没加 Token 的接口容易被爬虫批量刷。
- 页面加载时，由后端渲染一个一次性
csrf_token到 JS 变量或data-属性里，所有实名相关请求的headers都要带上X-CSRF-Token - HTTPS 不是可选项——Chrome 120+ 已彻底禁用 HTTP 下的
getUserMedia，连localhost外的所有 HTTP 站点都会静默失败 - 如果用第三方 SDK（如某云人脸核验），其
token参数必须由你后端动态生成并签名，有效期严格控制在 5 分钟内，不能硬编码在前端
最容易被忽略的是活体检测过程中的“用户等待感”：视频流启动后到第一帧渲染有 300–800ms 延迟，这期间页面不能干等，得用 loading 动画 + 文字提示（如“正在初始化摄像头…”），否则用户会反复点击按钮导致重复请求。这个细节没处理好，客服投诉量能翻倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
