Symfony 5中Twig调用JS函数报phoneverif未定义的问题

当前问题基本情况 #

• 测试访问的页面路径为http://localhost:8000/super_admin/telephone/nouveau
• 浏览器控制台抛出固定报错：Uncaught ReferenceError: phoneverif is not defined
• 报错触发位置：页面表单提交按钮绑定的onclick事件
• 预期开发的phoneverif()函数承载两个核心功能：
  • 表单正式提交前完成前置空值校验，检测对应字段为空时弹出匹配提示
  • 校验通过空值判断后，通过Ajax请求对接后端接口，校验数据库中对应电话号码是否已存在
• 已准备的配套实现素材：
  • 基于superadmin.html.twig布局扩展编写的Twig表单页面代码
  • 实现号码存在性校验逻辑的Phoneverif1控制器方法
  • 全量配置完成的FOSJsRoutingBundle：包含框架路由参数、路由暴露规则、前端资源加载配置、自定义校验路由verification_telephone的定义

报错常见根因 #

• 函数加载顺序颠倒：页面DOM解析到提交按钮、绑定onclick事件时，定义phoneverif逻辑的JS代码块还未被加载执行，导致事件触发时找不到对应函数
• 作用域隔离问题：如果phoneverif函数被写在DOMContentLoaded回调、ES模块作用域或者闭包内部，没有挂载到全局window对象上，内联onclick事件将无法跨作用域访问到该函数
• 资源加载缺失：如果phoneverif定义在独立的静态JS文件中，对应文件没有被正确引入当前页面的模板渲染链路中，前端HTML完全没有加载到函数定义代码
• Twig模板继承异常：自定义JS代码块因为block位置不对，没有被正确渲染到最终输出的页面HTML中，导致前端实际拿不到函数定义

校验功能落地的正确操作路径 #

• 排查函数作用域：在函数定义完成后，显式将函数挂载到全局对象，写法示例：window.phoneverif = phoneverif;，解决跨作用域访问问题
• 调整资源加载顺序：确保所有自定义JS函数定义、FOSJsRouting依赖的核心JS资源，都在按钮绑定事件的代码之前完成加载执行
• 验证FOSJsRouting配置有效性：
  • 确认自定义校验路由verification_telephone已开启暴露标识，可被前端JS调用
  • 清除Symfony项目缓存后，通过控制台命令php bin/console fos:js-routing:debug verification_telephone 验证路由解析是否正常
• 完善Ajax校验逻辑：在phoneverif函数内先执行空值校验，拿到用户输入的号码值后，调用Routing.generate()方法生成校验接口地址，发起异步请求获取后端返回的号码存在性结果，再判断是否允许表单正式提交

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