zoukankan      html  css  js  c++  java
  • react 信用卡格式检验

    前言: 技术栈主要基于react + ant-design

      描述: 填写信用卡卡号时,会自动四位空格,并格式校验判断卡种  ,这里我们业务只涉及到四种卡。

    代码解析 

    // ant 组件自引,这里我只讲解下具体的

    changeCardNumber= (e)=>{
      e.target.value = value.replace(/D/g, '').replace(/(s)/g, '').replace(/(d{4})/g, '$1 ').replace(/s*$/, '') // 这里主要是判断位数自动空格
      // 这里我们获取到表单的卡号是带空格的,而作为参数传给后端是不能带空格的,所以这里需要清除空格
      let value = e.target.value.replace(/s/g,"")
    }
     
    <Form.Item>
    {getFieldDecorator('cardNumer', {
    rules: [
    {
      required: true,
    },
    {
    validator: (rule, value, callback) => {
      if (!checkCreditCard(value.replace(/s/g, ""))) {
        callback('Please enter a valid Credit Card Number.')
      }
      callback()
      }
    }
    ],
    })(<Input onChange={changeCardNumber} />)}
    </Form.Item>
     
    //这是接上面 封装判断卡种方法
    const masterCardReg = '^(5[1-5][0-9]{14}|2(22[1-9][0-9]{12}|2[3-9][0-9]{13}|[3-6][0-9]{14}|7[0-1][0-9]{13}|720[0-9]{12}))$';
    const DiscoverReg = '^65[4-9][0-9]{13}|64[4-9][0-9]{13}|6011[0-9]{12}|(622(?:12[6-9]|1[3-9][0-9]|[2-8][0-9][0-9]|9[01][0-9]|92[0-5])[0-9]{10})$';
    const MaestroReg = '^(5018|5020|5038|6304|6759|6761|6763)[0-9]{8,15}$';
    const VisaReg = '^4[0-9]{12}(?:[0-9]{3})?$';
     
    export function checkCreditCard(card) {
      if (new RegExp(masterCardReg).test(card)) {
        return true;
      } else if (new RegExp(DiscoverReg).test(card)) {
        return true;
      } else if (new RegExp(MaestroReg).test(card)) {
        return true;
      } else if (new RegExp(VisaReg).test(card)) {  
        return true;
      }
      return false;
    }

    参考链接:https://blog.csdn.net/MercedesCc/article/details/83105049

    https://blog.csdn.net/john_jian_yo/article/details/78330449

    https://blog.csdn.net/awai320/article/details/47101469

    ant design验证input框只能输入数字

    https://blog.csdn.net/zr15829039341/article/details/82745239

  • 相关阅读:
    Daily Scrum 10.31
    Daily Scrum 10.30
    Daily Scrum 10.29
    Daily Scrum 10.28
    扩展设置
    安装
    james+javamail入门
    解决ZF2_PATH environment
    Apache Httpd Server 2.2升级2.4
    缓存,spring
  • 原文地址:https://www.cnblogs.com/Dobin/p/10904881.html
Copyright © 2011-2022 走看看