SSR场景下Nuxt.js使用原生Bootstrap表单验证仅重载后生效

已完成的基础配置 #

• 技术选型：项目使用 Nuxt.js 开发，直接引入原生 Bootstrap（未使用 vue-bootstrap 等 Vue 封装版本），计划落地 Bootstrap 官方提供的自定义表单校验能力
• 具体配置项：
  • 页面内表单标签增加 novalidate 属性，所有表单输入项配置为必填校验规则
  • 表单通过 @submit.prevent="formSubmit" 绑定提交拦截方法，阻断浏览器默认提交行为
  • 将 Bootstrap 官方的表单校验初始化逻辑抽取为独立文件 plugins/bootstrap-form-validation.js
  • 在 nuxt.config.js 中将该插件配置为客户端模式加载，规避服务端渲染阶段访问浏览器API导致的运行报错

异常表现 #

• 首次通过客户端路由跳转进入联系页面时，所有输入字段为空的状态下点击提交按钮，无任何表单校验触发效果
• 提交拦截方法可正常执行，控制台能输出对应的提交日志，但 Bootstrap 内置的校验逻辑完全未生效
• 手动刷新当前页面后，表单校验功能可完全正常运行
• 该问题在使用 Bootstrap 5.x 官方原生校验逻辑时同样存在，和 Bootstrap 版本无关
• 当前临时兜底方案：在页面组件的 mounted 钩子中结合 localStorage 判断路由首次进入状态，触发页面强制重载，绕过异常问题

问题本质 #

原实现的核心矛盾是脚本执行时机与DOM生成时机不匹配：
原插件在客户端加载阶段就直接执行DOM选择、事件绑定逻辑，此时Nuxt客户端还未完成当前路由页面的DOM渲染，选择器无法匹配到对应的表单元素，校验逻辑自然没有绑定到实际表单上。
而手动刷新页面时，浏览器会先完整渲染页面DOM，再执行脚本文件，此时脚本可以正确匹配到表单元素，绑定流程正常执行，功能也就恢复正常。

零强制刷新的优化方案 #

1. 重构插件文件逻辑
   移除 plugins/bootstrap-form-validation.js 中顶层直接执行的绑定代码，将原有的校验初始化逻辑封装为可独立调用的导出方法。方法内部保留全部原有逻辑：遍历页面内所有需要校验的表单，绑定提交事件，校验通过后放行提交动作、不通过时为表单增加 was-validated 类触发官方校验样式。
2. 在正确的生命周期节点触发初始化
   二选一即可完成适配：
   • 全局适配：在 Nuxt 客户端插件中注册 page:finish 钩子，每次客户端导航完成、页面DOM全量渲染后，调用封装好的校验初始化方法；调用前先对已绑定的表单节点做事件解绑，避免重复导航导致的事件重复触发
   • 组件级适配：直接在联系页面组件的 mounted 钩子中导入、调用封装好的校验初始化方法，此时组件DOM已经渲染完成，选择器可以正确匹配到表单节点，绑定流程即可正常生效
3. 效果验证
   完成调整后，首次通过客户端导航进入联系页面时，无需手动刷新，点击提交按钮即可正常触发 Bootstrap 内置的必填校验逻辑，同时完全兼容原有的服务端渲染运行要求，不会出现浏览器API未定义的报错。

内容的提问来源于stack exchange，提问作者hndvf