使用 yup 验证链接

Yup 是一个用于 JavaScript 对象的解析和验证的通用库。它可以用于验证任何类型的数据，包括字符串、数字和对象等。在这里，我们将介绍如何使用 Yup 验证链接。

安装 Yup

你可以使用 npm 或 yarn 来安装 Yup：

npm install yup

# 或

yarn add yup

创建验证架构

创建验证架构是首先步骤。您可以使用 object 架构来指定对象的属性，例如链接的属性为 url。

import * as yup from 'yup';

const schema = yup.object().shape({
  url: yup.string().url().required(),
});

此架构指定了一个名为 url 的属性，并要求该属性是一个 URL 字符串。

验证链接

接下来，您可以将链接对象传递到验证架构中，使用 isValidSync 方法进行验证。

const link = { url: 'https://github.com/' };

schema.isValidSync(link); // true

const invalidLink = { url: 'not-a-url' };

schema.isValidSync(invalidLink); // false

isValidSync 方法返回一个布尔值，如果满足验证方案，则为 true。

获取验证错误

如果验证失败，则可以使用 validateSync 方法获取验证错误：

try {
  schema.validateSync({ url: 'not-a-url' });
} catch (error) {
  console.error(error);
  // ValidationError: this must be a valid URL
}

这将抛出一个 ValidationError，其中具有描述问题的错误消息。

完整代码示例

import * as yup from 'yup';

const schema = yup.object().shape({
  url: yup.string().url().required(),
});

const link = { url: 'https://github.com/' };
const invalidLink = { url: 'not-a-url' };

console.log(schema.isValidSync(link)); // true
console.log(schema.isValidSync(invalidLink)); // false

try {
  schema.validateSync({ url: 'not-a-url' });
} catch (error) {
  console.error(error);
  // ValidationError: this must be a valid URL
}

结论

Yup 是一个非常有用的库，它可以帮助您轻松验证数据。使用 Yup 验证链接仅仅需要几行代码，您可以在任何应用程序中使用该代码！