Vue+Laravel场景下Bootstrap Modal打开前校验及表单提交问题咨询

问题1：点击Add New Accessory按钮仅当指定字段填写完成才打开模态框 #

• 首先移除按钮自带的Bootstrap模态框自动触发属性（Bootstrap 5 对应data-bs-toggle、data-bs-target，低版本对应data-toggle、data-target），改为手动控制模态框显示
• 给按钮绑定点击事件，事件内先校验store_id和request_date字段的有效值，校验通过再唤起模态框：
  • jQuery/原生JS场景：校验通过后手动调用$('#你的模态框ID').modal('show')打开模态框，示例代码如下：

    $('#addAccessoryBtn').on('click', function () {
      const storeId = $('input[name="store_id"]').val().trim()
      const requestDate = $('input[name="request_date"]').val().trim()
      if (!storeId || !requestDate) {
        alert('请先填写门店ID和申请日期')
        return
      }
      $('#accessoryModal').modal('show')
    })
    

  • Vue场景：给模态框绑定v-show/v-if控制变量，校验通过后将变量置为true即可

问题2：模态框提交时路由不生效、页面跳转异常排查 #

当前跳转表现为GET请求携带表单参数，可按以下步骤排查：

• 优先排查是否阻止了表单默认提交行为：Vue场景下给form标签加@submit.prevent修饰符，原生/jQuery场景下给提交事件加e.preventDefault()，避免表单触发默认GET提交跳转
• 校验请求配置和路由是否匹配：你定义的是POST类型的accessory/store路由，需确认提交请求的方法为POST，路由路径拼写正确，建议给路由加别名避免硬编码出错，修改路由为Route::post('accessory/store','AccessoryController@store')->name('accessory.store')，提交时用Laravel辅助函数route('accessory.store')生成请求地址
• 确认CSRF令牌是否正常携带：Laravel POST路由默认校验CSRF令牌，普通表单提交需在form内加@csrf指令，AJAX提交需在请求头中携带X-CSRF-TOKEN，值为Blade全局的csrf_token()
• 排查控制器返回逻辑：确认AccessoryController的store方法内没有多余的跳转逻辑，AJAX提交场景下需返回JSON格式响应，不要返回redirect()类的跳转响应

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