Использование Yup для проверки данных кредитной карты - PullRequest
Новая
       8

Использование Yup для проверки данных кредитной карты

0 голосов
/ 08 июня 2018

Я использую Yup для проверки формы регистрации, но я изо всех сил пытаюсь проверить поля кредитной карты из-за необходимости методов из схем string и number Yup.

Номер карты, например, не должен превышать 16 символов.Этого легко достичь, используя метод max из схемы string.Однако, если пользователь набрал 16 букв, а не цифры, в настоящее время он пройдет проверку.Если я изменю схему с string на number, то max не будет вести себя одинаково и вместо этого сложит все числа в поле и проверит, равно ли оно меньше максимального числа.

Примером поля, в котором мне нужно было бы использовать методы min и max схемы number, является месяц истечения, где минимум будет равен 1, а максимум равен 12. ОднакоМне все еще нужно проверить, чтобы убедиться, что количество символов в этом поле равно 2, так как ведущий 0 должен использоваться для месяцев с января по сентябрь. 

const validationSchema = {
  cardNumber: Yup.string()
    .label('Card number')
    .max(16)
    .required(),
  cvc: Yup.string()
    .label('CVC')
    .min(3)
    .max(4)
    .required(),
  nameOnCard: Yup.string()
    .label('Name on card')
    .required(),
  expiryMonth: Yup.string()
    .label('Expiry month')
    .min(2)
    .max(2)
    .required(),
  expiryYear: Yup.string()
    .label('Expiry year')
    .min(4)
    .max(4)
    .required(),
};

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

Вот как я использовал метод Юпа .test() для проверки срока действия кредитной карты в прошлом.

1) Мне пришлось использовать маску, а с помощью маски DOMЭлементом, который я должен был использовать, было одно поле ввода.Маска выглядит следующим образом: __/__ (два подчеркивания, разделенные косой чертой)

Сначала проверка начиналась как: 

export const expirationDate = Yup.string()
  .typeError('Not a valid expiration date. Example: MM/YY')
  .max(5, 'Not a valid expiration date. Example: MM/YY')
  .matches(
    /([0-9]{2})\/([0-9]{2})/,
    'Not a valid expiration date. Example: MM/YY'
  )
  .required('Expiration date is required')

Несмотря на то, что была проверка на стороне сервера,Я все еще должен сделать работу, чтобы предотвратить неправильные данные, такие как: 13/19 или 99/99Зачем тратить время на звонки в обе стороны?Итак, между вызовами методов .matches() и .required() я добавил: 

.test(
    'test-credit-card-expiration-date',
    'Invalid Expiration Date has past',
    expirationDate => {
      if (!expirationDate) {
        return false
      }

      const today = new Date()
      const monthToday = today.getMonth() + 1
      const yearToday = today
        .getFullYear()
        .toString()
        .substr(-2)

      const [expMonth, expYear] = expirationDate.split('/')

      if (Number(expYear) < Number(yearToday)) {
        return false
      } else if (
        Number(expMonth) < monthToday &&
        Number(expYear) <= Number(yearToday)
      ) {
        return false
      }

      return true
    }
  )
  .test(
    'test-credit-card-expiration-date',
    'Invalid Expiration Month',
    expirationDate => {
      if (!expirationDate) {
        return false
      }
      const today = new Date()
        .getFullYear()
        .toString()
        .substr(-2)

      const [expMonth] = expirationDate.split('/')

      if (Number(expMonth) > 12) {
        return false
      }

      return true
    }
  )

ссылки:

0 голосов
/ 23 января 2019

Вместо выполнения такой проверки вы можете использовать метод тестирования Yup и вернуть true или false, данные сторонними валидаторами.Например: braintree/card-validator.Итак, это будет выглядеть примерно так: 

import valid from 'card-validator'; //import statement

CreditCardNumber: 
Yup
    .string()
    .test('test-number', // this is used internally by yup
    'Credit Card number is invalid', //validation message
     value => valid.number(value).isValid) // return true false based on validation
    .required()

Также есть valid.expirationDate(value).isValid, valid.cvv(value).isValid драм valid.postalCode(value).isValid

https://github.com/braintree/card-validator

https://github.com/jquense/yup#mixedtestname-string-message-string--function-test-function-schema

Надеюсь, это поможет!

...