Introduction: The main technology stack based react + ant-design
Description: When filling out a credit card number, it will automatically four spaces, and determine the format check card types, here we only involves business or four cards.
Code analysis
// ant components from lead, where I will explain the specific
changeCardNumber = (E) => {
e.target.value value.replace = (/ \ D / G, '') .replace (/ (\ S) / g, '') .replace (/ (\ d {4}) / g, '$ 1') .replace (/ \ s * $ /, '') // here is mainly the number of bits is determined automatically spaces
// here we card is acquired form with spaces, and the rear end is not passed as a parameter with spaces, so there need to clear the space
the let e.target.value.replace value = (/ \ 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>
// This is the above ground encapsulation method is determined Cards
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}$';
VisaReg = const '-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;
}
Reference Links: 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 verification input box can only enter numbers
https://blog.csdn.net/zr15829039341/article/details/82745239