是否有一个名为yup的函数可以验证特定长度?
我尝试过.min(5)
和 .max(5)
,但我需要确保数字正好是5个字符长度(例如邮政编码)的一些东西。
是否有一个名为yup的函数可以验证特定长度?
我尝试过.min(5)
和 .max(5)
,但我需要确保数字正好是5个字符长度(例如邮政编码)的一些东西。
这个检查可以带来最佳的验证体验:
Yup.string()
.required()
.matches(/^[0-9]+$/, "Must be only digits")
.min(5, 'Must be exactly 5 digits')
.max(5, 'Must be exactly 5 digits')
输出:
12f1 // Must be only digits
123 // Must be exactly 5 digits
123456 // Must be exactly 5 digits
01234 // valid
11106 // valid
我认为没有内置的实现方法,但使用test
很容易实现:
yup.string()
.test('len', 'Must be exactly 5 characters', val => val.length === 5)
000123.toString().length
的输出是 2
而不是 3
。这是因为 JavaScript 解析器将以零开头的数字字面量解释为八进制数。但是,JavaScript 没有带前导零的数字的内部表示。如果它有前导零,则必须是一个字符串。如果您不想在字符串上有前导零,请将其规范化为 parseFloat("000123").toString().length === 3
。 - Tamlyn为了以后的参考,如果您想验证一个数字(邮政编码),上述解决方案需要稍微修改。该函数应改为:
Yup.number().test('len', '必须是5个字符', val => val.toString().length === 5)
.length
不适用于数字,只适用于字符串。
Yup.number().test('len', '必须正好是5个字符', (val) => { if(val) return val.toString().length === 8; })
。 - Hylleval && val => val.toString().length === 5
- Jake您还可以使用string.length
。
yup.string().length(5)
但是它不能处理以零开头的数字:
const yup = require('yup')
const schema = yup.string().length(5)
console.log(schema.isValidSync(12345)) // (true) This is valid.
console.log(schema.isValidSync(00123)) // (false) This is NOT valid.
yup.string().length(5, "应该恰好为5个字符")
。 - benftwc@Tamlyn的答案很好地涵盖了问题的长度验证方面。
对于邮政编码,您可以使用正则表达式在Yup.string()
中强制执行长度限制,并限制为数字值(您不希望使用Yup.number()
类型,因为它不支持以零0####
开头的邮政编码)。
// ##### format zip code
Yup.string().matches(/^[0-9]{5}$/, 'Must be exactly 5 digits')
// ##### and #####-#### format zip codes
Yup.string().matches(/^[0-9]{5}(?:-[0-9]{4})?$/, 'Must be 5 or 9 digits')
对于数字类型,它的效果非常好。
yup.number().test('len', 'Max 6 numbers', (val) => val.toString().length <= 6)
除了其他答案外,它们都没有检查是否存在某个值(尽管发布后我看到有些人在评论中提到了这一点)...
如果它不存在且该字段为空,则将尝试获取undefined
或null
的长度,这将导致javascript错误并防止其他条件(如果你当然设置了.required()
)起作用。
这可能会稍微好一些:
// Check we have a value as well
Yup.number().test('len', 'Must be exactly 5 characters', val => val && val.toString().length === 5 )
number()
不起作用,因为您可能正在输入以零开头的安全代码,而 Yup.number() 会将它们吞噬掉。例如:000445
将被传递给 val
作为 445
。 - SimoAmi尝试这个:
Yup.number()
.required()
.min(10000, 'Must be exactly 5 characters')
.max(99999, 'Must be exactly 5 characters')
.label("Zip Code"),
您仍然可以使用验证数字的方法,但如果要验证长度,您需要在测试之前将其转换为字符串。
Yup.object().shape({
zipCode: Yup.number()
.required('Zip code is a required field')// optional
.typeError('Zip code can only be a number')// optional as well
.test('len', 'Zip code needs to be excatly 5 digits', val => val.toString().length === 5)
});
当您的字段没有值时,测试API在ReactJs中遇到问题。您可以改用长度API。
Yup.string().length(4, 'This field has to be exactly 4 characters!')
console.log(08763)
将输出> 8763
,但console.log('08763')
将输出> 08763
。 - SimoAmi