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