[英]Using Yup to validate credit card details
我正在使用Yup来验证注册表单,但由于需要来自 Yup 的string
和number
架构的方法,我正在努力验证信用卡字段。
例如,卡号不应超过 16 个字符。 使用string
模式中的max
方法可以轻松实现这一点。 但是,如果用户输入 16 个字母而不是数字,这当前将通过验证。 如果我将模式从string
更改为number
则max
不会以相同的方式运行,而是将字段中的所有数字相加并检查它是否等于小于最大数字。
我需要使用number
架构的min
和max
方法的字段示例是到期月份,其中最小值为 1,最大值为 12。但是,我仍然需要检查以确保数字此字段中的字符数为 2,因为 1 月至 9 月应使用前导 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(),
};
您可以使用 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
希望能帮助到你!
这是我过去如何使用Yup 的.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
}
)
参考:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.