使用 Yup 验证以检查字符串或数字长度

Question

是否有验证特定长度的 yup 函数？

我尝试了 .min(5) 和 .max(5)，但我想要确保数字恰好为 5 个字符（即邮政编码）的东西。

Answer 1

我认为没有内置任何东西，但使用 test 很容易实现：

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

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

Answer 2

为了将来参考，如果您要验证数字（邮政编码），上述解决方案需要稍作调整。函数应该是：

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

.length 不适用于数字，仅适用于字符串。

Answer 3

@Tamlyn 的很好地涵盖了问题的长度验证方面。

对于邮政编码，您可以使用 regex 来强制 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')

Answer 4

要添加到其他答案中，none 他们正在检查一个值是否存在（尽管我看到有些人在发布后在评论中提到了这一点）...

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

Answer 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.

Answer 6

@efru 的非常适合少于 22 个字符的数字。但是 val.toString().length 不适用于大于 22 个字符的数字。这样做的原因是在 javascript.

中将较大的数字转换为字符串时会转换为指数格式

我发现最有效的解决方案是：

Yup.number().test('len', 'Must be exactly 25 characters', val => Math.ceil(Math.log10(val + 1)) === 25)

Answer 7

此检查可带来最佳验证体验：

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

Answer 8

当您的字段没有值时，测试 API 会遇到 ReactJs 问题。您可以使用长度 API 代替

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

Answer 9

你的方法是正确的，也是最简单的。

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

Answer 10

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),

Answer 11

试试这个：

Yup.number()
.required()
.min(10000, 'Must be exactly 5 characters')
.max(99999, 'Must be exactly 5 characters')
.label("Zip Code"),

Answer 12

您仍然可以使用数字验证，但是当使用测试验证长度时，您需要先将其转换为字符串，然后再进行测试。

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

Answer 13

对类型号来说就像一个魅力。

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

Answer 14

matches(/^[0-9]{8}$/, "Only 8 digits") 现在，如果用户输入字母或多于或少于 8 位数字，Yup 将显示错误

使用 Yup 验证以检查字符串或数字长度

Validation using Yup to check string or number length

javascript

reactjs

yup

formik