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