Антонио: Знаете, какой самый тупой UX?
Когда вам нужно выбрать тип кредитной карты в платежной форме. Разве они не могут понять это по номерам кредитных карт?
Я: Эээ... не все так просто 😅.
Так что некоторое время назад мне пришлось внедрить проверку типа кредитной карты на GFNY.cc, потому что вы не можете использовать Amex с колумбийскими песо на платформе Bluesnap (кто знал 🤷🏻♂️:).
Я видел эту функциональность тысячу раз на просторах Интернета, поэтому решил, что ее будет легко реализовать — спустя 20 постов в блоге я уже не был так уверен.
^(4903|4905|4911|4936|6333|6759)[0-9]{12}|(4903|4905|4911|4936|6333|6759)[0-9]{14}|(4903|4905|4911|4936|6333|6759)[0-9]{15}|564182[0-9]{10}|564182[0-9]{12}|564182[0-9]{13}|633110[0-9]{10}|633110[0-9]{12}|633110[0-9]{13}$Если у вас нет проблем с выполнением этого шаблона для Карты переключения, то вы далеко не мой мастер лиги 🙇♂️.
Но если вы, как и я, понимаете основы Regex, но немного теряетесь, как только появляются условия и группы захвата, продолжайте. Я регулярно копирую код из Интернета, но я копирую код, который понимаю. Если бы показанное выше регулярное выражение содержало ошибки/должно было быть скорректировано/изменено/улучшено (что не является неожиданным, см. пункт 1.), я был бы в заднице 😅.
Добавление еще одной библиотеки для решения каждой проблемы — хороший пример подхода «Выбрось на это деньги»
Сравнение размеров некоторых популярных библиотек типа/валидации CC с размерами React
Типы кредитных карт
Amex, Visa и China Union Pay ❤️ единственные, которые не доставляют проблем:
Visa:если оно начинается с 4, это Visa [16 цифр (13 в некоторых особых случаях)]
American Express:начинается с 34 или 37 [15 цифр].
CUP:начинается с 62 или 81 [16–19 цифр, увеличение сложности, но все еще под контролем]
Теперь начинается самое интересное:
Mastercard:первые 2 цифры могут варьироваться от 51 до 55, но, как упоминалось выше, с 2017 года они также охватывают диапазон 2221–2720 [к счастью, в обоих случаях 16 цифр]
Discover(🙈):если оно начинается с 64 или 65 [16–19 цифр], это определенно Discover, но…
Он также может начинаться с любого из этих 6011, 622126–622925, 624000–626999, 628200–628899 (😭)
Diners: 36 определенно Diners [14–19 цифр], но также 300–305, 3095, 38–39 [обратите внимание, что они варьируются от 16–19 цифр]
JBC:охватывает диапазон 3528–3589 [16–19 цифр].
Ванильное Javascript-решение
Это ни в коем случае не идеальное решение. Идея заключалась в том, чтобы уменьшить сложность регулярных выражений и перенести всю условную логику и параметры в Javascript (где ей место (?)). В этом коротком фрагменте я рассмотрел только те случаи, которые мне нужны для этой функции, поэтому не стесняйтесь добавлять или настраивать ее в соответствии со своими потребностями.
export function creditCardType(cc: string) { let amex = new RegExp('^3[47][0-9]{13}$'); let visa = new RegExp('^4[0-9]{12}(?:[0-9]{3})?$'); let cup1 = new RegExp('^62[0-9]{14}[0-9]*$'); let cup2 = new RegExp('^81[0-9]{14}[0-9]*$'); let mastercard = new RegExp('^5[1-5][0-9]{14}$'); let mastercard2 = new RegExp('^2[2-7][0-9]{14}$'); let disco1 = new RegExp('^6011[0-9]{12}[0-9]*$'); let disco2 = new RegExp('^62[24568][0-9]{13}[0-9]*$'); let disco3 = new RegExp('^6[45][0-9]{14}[0-9]*$'); let diners = new RegExp('^3[0689][0-9]{12}[0-9]*$'); let jcb = new RegExp('^35[0-9]{14}[0-9]*$'); if (visa.test(cc)) { return 'VISA'; } if (amex.test(cc)) { return 'AMEX'; } if (mastercard.test(cc) || mastercard2.test(cc)) { return 'MASTERCARD'; } if (disco1.test(cc) || disco2.test(cc) || disco3.test(cc)) { return 'DISCOVER'; } if (diners.test(cc)) { return 'DINERS'; } if (jcb.test(cc)) { return 'JCB'; } if (cup1.test(cc) || cup2.test(cc)) { return 'CHINA_UNION_PAY'; } return undefined; }Заворачивать
Определенно не вынуждать читателей к взаимодействию
Это все люди! Обязательно дайте мне знать, если вы обнаружите какие-то ошибки или какие-то *подсказки* раскрытые случаи *подсказка* — определенно не вымогаю взаимодействие с моими читателями 😇 . А если серьезно, если вы хотите узнать об этих небольших улучшениях и нюансах, дайте мне знать в разделе комментариев 👇🏻👇🏻👇🏻👇🏻👇🏻.
Первоначально опубликовано на https://locastic.com 7 августа 2020 г.
