javascript - 使用 Yup 验证信用卡详细信息

Question

我正在使用 Yup验证注册表单，但由于需要来自 Yup 的 string 和 number 架构的方法，我正在努力验证信用卡字段。

例如卡号不能超过 16 个字符。这可以使用 string 模式中的 max 方法轻松实现。但是，如果用户输入的是 16 个字母而不是数字，则当前可以通过验证。如果我将架构从 string 更改为 number，则 max 的行为方式不同，而是将字段中的所有数字相加并检查它是否等于小于最大数量。

我需要使用 number 模式的 min 和 max 方法的字段示例是到期月份，其中最小值为 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(),
};

Answer 1

除了像这样进行验证，您可以使用 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

希望对您有所帮助!