Vue实现信用卡校验通过后跳转至success.php页面的方法

你之前写的axios.get('success.php')逻辑是错的——axios是异步请求工具，只会拉取目标地址的返回内容，不会触发浏览器页面跳转。具体实现按下面步骤来：

1. 绑定提交事件、拦截校验不通过场景 #

首先给你的信用卡表单绑定submit事件，在提交回调里先拉取vue-credit-card-validation的全量校验结果，校验不通过直接中断逻辑，不要执行后续操作。

注意：把代码里的v$、form替换成你自己项目里实际绑定的校验实例、表单数据ref名

<template>
  <!-- 给表单绑定submit事件，阻止默认提交行为 -->
  <form @submit.prevent="onSubmit">
    <!-- 你原来的卡号、有效期、CVC输入框代码保持不变 -->
    <button type="submit">提交校验</button>
  </form>
</template>

<script setup>
// 你原来引入插件、定义表单字段、初始化校验的代码保持不变
const onSubmit = async () => {
  // 触发所有字段的规则校验，拿到最终校验结果
  const isAllValid = await v$.value.$validate()
  // 只要有一个字段不符合规则，直接返回，不跳转
  if (!isAllValid) return

  // 校验通过后执行跳转，二选一即可
  // 👉 选这个：success.php是后端独立页面的场景，和普通链接跳转效果一致
  window.location.href = 'success.php'
  // 支付场景推荐用replace，不会留表单页历史记录，用户点返回不会回到填卡页
  // window.location.replace('success.php')

  // 👉 只有你项目用vue-router、success.php是路由映射的单页面组件时，才用下面这个
  // router.push('/success')
}
</script>

2. 需要先提交卡信息再跳转的场景 #

如果业务要求先把信用卡信息提交给后端校验/存储，等接口返回成功再跳转，就把axios请求放在校验通过之后、跳转之前：

const onSubmit = async () => {
  const isAllValid = await v$.value.$validate()
  if (!isAllValid) return

  try {
    // 提交卡信息给后端接口，按你实际接口地址改
    await axios.post('/api/submit-card', {
      cardNo: form.cardNumber,
      expireDate: form.expiry,
      cvc: form.cvc
    })
    // 接口请求成功再跳转
    window.location.href = 'success.php'
  } catch (e) {
    // 提交失败的时候给用户弹提示，不要跳转
    alert('卡信息提交失败，请重试')
  }
}

常见避坑 #

• 不要在单个字段的输入监听事件里写跳转逻辑，必须等用户主动触发提交、所有字段全量校验通过后再跳
• 不要用axios请求success.php页面，这个操作只会拿到页面的html字符串，不会让浏览器打开目标页面，属于无效请求
• 如果校验逻辑是你自己写的、没有用插件自带的$validate方法，就把你自己判断卡号、有效期、CVC格式的条件凑齐，三个条件全满足的时候再执行跳转即可

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