javascript - 使用 Yup 验证信用卡详细信息
问题描述
我正在使用Yup验证注册表单,但由于需要 Yupstring
和number
模式中的方法,我正在努力验证信用卡字段。
例如卡号不应超过 16 个字符。max
使用模式中的方法很容易实现这一点string
。但是,如果用户输入 16 个字母而不是数字,则当前将通过验证。如果我将模式从更改string
为number
thenmax
不会以相同的方式运行,而是将字段中的所有数字相加并检查它是否等于小于最大数字。
我需要使用模式的min
andmax
方法的字段示例number
是到期月份,其中最小值为 1,最大值为 12。但是,我仍然需要检查以确保字符数是在此字段中为 2,因为前导 0 应用于 1 月至 9 月的月份。
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(),
};
解决方案
true
您可以使用 Yup 的测试方法并返回或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
希望能帮助到你!
推荐阅读
- api - 将用户语音文本发送到 Alexa 技能 API 端点
- ember.js - 页面加载前的 ember js 错误
- azure - 根据电子邮件域自动将 Azure AD 中的帐户类型从来宾更改为成员
- blockchain - 如何在超级账本锯齿中查询特定资源的交易
- java - 列出 NullPointerException 休眠
- php - WordPress 移动检测/引导网格
- php - 自定义帖子类型存档页面/模板
- spring-boot - Spring Boot Camel JPA 没有本地事务加入
- android - JobSchedule 如何持久化作业?我什么时候应该重新安排他们?
- java - 如何在 jar 上重新加载属性文件