前言: 技术栈主要基于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