Vue全局变量校验银行卡号是否正确

本文深入解析了银行卡号的Luhn校验算法,详细介绍了如何通过倒序处理银行账号的每位数字,利用奇偶位不同的计算规则来验证银行卡号的有效性。文章提供了完整的JavaScript实现代码,帮助读者理解并应用这一重要算法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

.定义公共方法,新建一个js文件checkBank.js

const checkBank = function luhmCheck (bankno) {
  let lastNum = bankno.substr(bankno.length - 1, 1) // 取出最后一位(与luhm进行比较)
  let first15Num = bankno.substr(0, bankno.length - 1) // 前15或18位
  let newArr = []
  for (let i = first15Num.length - 1; i > -1; i--) { // 前15或18位倒序存进数组
    newArr.push(first15Num.substr(i, 1))
  }
  let arrJiShu = [] // 奇数位*2的积 < 9
  let arrJiShu2 = [] // 奇数位*2的积 >9

  let arrOuShu = [] // 偶数位数组
  for (let j = 0; j < newArr.length; j++) {
    if ((j + 1) % 2 === 1) { // 奇数位
      if (parseInt(newArr[j]) * 2 < 9) {
        arrJiShu.push(parseInt(newArr[j]) * 2)
      } else {
        arrJiShu2.push(parseInt(newArr[j]) * 2)
      }
    } else {
      arrOuShu.push(newArr[j])
    }// 偶数位
  }
  let jishuChild1 = [] // 奇数位*2 >9 的分割之后的数组个位数
  let jishuChild2 = [] // 奇数位*2 >9 的分割之后的数组十位数
  for (let h = 0; h < arrJiShu2.length; h++) {
    jishuChild1.push(parseInt(arrJiShu2[h]) % 10)
    jishuChild2.push(parseInt(arrJiShu2[h]) / 10)
  }
  let sumJiShu = 0 // 奇数位*2 < 9 的数组之和
  let sumOuShu = 0 // 偶数位数组之和
  let sumJiShuChild1 = 0 // 奇数位*2 >9 的分割之后的数组个位数之和
  let sumJiShuChild2 = 0 // 奇数位*2 >9 的分割之后的数组十位数之和
  let sumTotal = 0
  console.log(sumTotal)
  for (let m = 0; m < arrJiShu.length; m++) {
    sumJiShu = sumJiShu + parseInt(arrJiShu[m])
  }
  for (let n = 0; n < arrOuShu.length; n++) {
    sumOuShu = sumOuShu + parseInt(arrOuShu[n])
  }
  for (let p = 0; p < jishuChild1.length; p++) {
    sumJiShuChild1 = sumJiShuChild1 + parseInt(jishuChild1[p])
    sumJiShuChild2 = sumJiShuChild2 + parseInt(jishuChild2[p])
  }
  // 计算总和
  sumTotal = parseInt(sumJiShu) + parseInt(sumOuShu) + parseInt(sumJiShuChild1) + parseInt(sumJiShuChild2)
  // 计算Luhm值
  let k = parseInt(sumTotal) % 10 === 0 ? 10 : parseInt(sumTotal) % 10
  let luhm = 10 - k
  if (Number(lastNum) === luhm && lastNum.length !== 0 && bankno.length > 11) {
    return true
  } else {
    return false
  }
}
export default checkBank

 

### 在 Vue 中定义和使用全局变量的方法 在 Vue 项目中,可以通过多种方式来定义和使用全局变量。以下是几种常见的方法及其具体实现: #### 方法一:通过 `Vue.prototype` 添加全局属性或方法 在 Vue 2 中,可以直接利用 `Vue.prototype` 来定义全局变量或函数。这种方式使得任何组件都可以访问这些全局资源。 ```javascript // main.js 或入口文件中 import Vue from 'vue'; // 定义全局变量 Vue.prototype.$globalVar = '这是一个全局变量'; // 定义全局函数 Vue.prototype.changeData = function () { console.log('这是全局函数'); }; // 组件内部调用 console.log(this.$globalVar); // 输出: 这是一个全局变量 this.changeData(); // 调用全局函数并打印日志 ``` 这种方法简单易用,但在 Vue 3 中已被废弃[^2]。 --- #### 方法二:通过 Vuex 状态管理工具 Vuex 是专门为 Vue 提供的状态管理模式,适用于复杂的应用场景。它允许集中存储数据并通过特定的方式进行修改和读取。 ```javascript // store/index.js import { createStore } from 'vuex'; export default createStore({ state: { globalVariable: '这是通过 Vuex 设置的全局变量' }, mutations: { updateGlobalVariable(state, newValue) { state.globalVariable = newValue; } } }); // 在组件中使用 import { mapState } from 'vuex'; export default { computed: { ...mapState(['globalVariable']) } }; console.log(this.globalVariable); ``` 此方法适合需要跨多个组件共享状态的情况[^1]。 --- #### 方法三:基于 Vue 3 的 Composition API 和 `appContext` 在 Vue 3 中推荐使用 Composition API 配合 `getCurrentInstance()` 获取当前实例上下文中的配置对象来进行全局变量的操作。 ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); // 定义全局变量 app.config.globalProperties.$key = '这是 Vue 3 的全局变量'; // 页面中使用 import { getCurrentInstance } from 'vue'; export default { setup() { const internalInstance = getCurrentInstance(); const global = internalInstance.appContext.config.globalProperties; console.log(global.$key); // 访问全局变量 } }; ``` 该方法充分利用了 Vue 3 新特性,在现代项目中有较高的适用性[^3]。 --- #### 方法四:直接挂载到 `window` 对象 如果不需要依赖框架本身的功能,也可以将变量直接挂在浏览器的全局作用域下(即 `window` 对象)。不过需要注意的是,这种做法可能会污染全局命名空间,并带来潜在冲突风险。 ```javascript // 全局定义 window.myGlobalVar = '这是 window 上的全局变量'; // 使用时无需导入 console.log(window.myGlobalVar); ``` 尽管方便快捷,但通常仅用于调试或其他特殊需求场合。 --- ### 总结 以上介绍了四种不同的方式来实现在 Vue 应用程序内的全局变量声明与应用。每种方案都有其特点以及适应范围,请依据实际业务情况选取最合适的策略实施即可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值