使用 Yes 检查字符串或数字长度的验证

我不认为有什么内置的，但它很容易实现与 test:

yup.string()
.test('len', 'Must be exactly 5 characters', val => val.length === 5)

Https://runkit.com/tamlyn/5ad9b99a4ba1230012d7ac21

为了以后的参考，如果您想验证一个数字(邮政编码) ，上面的解决方案需要稍微调整一下。职能应该是:

Yup.number().test('len', 'Must be exactly 5 characters', val => val.toString().length === 5)

.length不能处理数字，只能处理字符串。

@ 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')

为了增加其他的答案，他们都没有检查一个值是否存在(我看到一些人在发布这个后在评论中提到了这一点) ..。

如果它不存在，并且该字段为空，它将尝试获取 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 )

你也可以使用 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.

@ efru 的 回答适用于小于22个字符的数字。但是，val.toString().length不适用于大于22个字符的数字。其原因是当在 javascript 中转换为字符串时，较大的数字被转换为指数格式。

我发现最有效的解决办法是:

Test (“ len”，“必须正好是25个字符”，val = > Math.ceil (Math.log10(val + 1)) = = = 25)

这种检查会带来最好的验证体验:

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

演示: Https://codesandbox.io/s/yup-y6uph

当字段没有值时，测试 API 会遇到 ReactJ 问题。您可以改用长度 API

Yup.string().length(4, 'This field has to be exactly 4 characters!')

这是一个简单的解决方案，但它并不完美。

Yup.string()
.required()
.min(5, 'Must be exactly 5 digits')
.max(5, 'Must be exactly 5 digits')

解决方案之一是:

Yup.string().matches(/^[0-9]{5}$/, 'Must be exactly 5 digits')

import { string, date} from 'yup' // Take out what is needed in import


string()
.trim()
.matches(
/^[0-9]{4}[0-9]{2}[0-9]{2}T 0-9]{2}:[0-9]{2}:[0-9]{2}.[0-9]{3}Z$/,
'createdOn is not in correct format',
)
.max(24),

试试这个:

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)
});

对于类型号来说就像是一种魅力。

yup.number().test('len', 'Max 6 numbers', (val) => val.toString().length <= 6)

匹配(/^ [0-9]{8} $/，“只有8位数”)现在，如果用户输入字母和多于或少于8位数字，那么 Yes 将显示错误

我将我的数字转换成字符串并将我的数字以字符串的形式存储在一个反应状态中。

我的解决办法是这样的

    amount: Yup.number()
.test('len', maxAmountLength, () => amountState.length <= 50)