# @convidera-team/vue-form-validator 中文文档

规范地址：https://npmcn.com/package/%40convidera-team/vue-form-validator/

版本：1\.1\.5
npm 元数据更新时间：2026-07-17T07:34:11.631Z
中文译文更新时间：2026-11-10T21:58:49.264Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40convidera-team/vue-form-validator
原文对照：https://npmcn.com/package/%40convidera-team/vue-form-validator/?lang=original
项目主页：https://github.com/convidera/frontend-kit#readme
源码仓库：https://github.com/convidera/frontend-kit

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：33.4 kB，53 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：vue \>=3，axios \>=0\.2
- 首次发布：2023-04-12T11:00:11.474Z
- 最新版本发布：2025-01-21T14:32:48.256Z
- 近 30 天下载量：2924（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 0 个）

## 中文简介

## 安装

## 安装

```sh
npm install @convidera-team/vue-form-validator
```

也可以使用：`pnpm add @convidera-team/vue-form-validator`、`yarn add @convidera-team/vue-form-validator`、`bun add @convidera-team/vue-form-validator`

## README

# 窗体验证符

## 安装

```sh
yarn add @convidera-team/vue-form-validator
```

或者说

```sh
npm install @convidera-team/vue-form-validator --save
```

## 基本用途

```vue
<script lang="ts" setup>
import {
  useFormValidator,
  isFormValidatorError,
  isAxiosError,
} from '@convidera-team/vue-form-validator';

const rules = useRules();
const form = useFormValidator();

const name = form.addField('name', '', [
  rules.required('The field is required'),
]);

const email = form.addField('email', '', [
  rules.required('The field is required'),
  rules.email('The field should be email'),
]);

const password = form.addField('password', '', [
  rules.required('The field is required'),
  rules.min(6, 'The field should be min 6 characters'),
]);

const passwordConfirmation = form.addField('password_confirmation', '', [
  rules.required('The field is required'),
  (value) => rules.confirmed(password.value.value, 'The confirmation is incorrect')(value),
]);

async function submit() {
  try {
    // If there are any validation errors, they will be thrown and apiRequest will not be called
    await form.handleSubmit(() => apiRequest({
      name: name.value.value,
      email: email.value.value,
    }));
  } catch (error) {
    if (isFormValidatorError(error)) {
      // Catch form validation errors
      console.warn(error.list);
    } else if (isAxiosError(error)) {
      // Catch axios errors
      console.warn(error.response?.data);
    } else {
      throw error;
    }
  }
}
</script>

<template>
  <form @submit.prevent="submit">
    <input
      v-model="name.value.value"
      label="Name"
      :valid="name.valid.value"
      @blur="name.validate()"
    >
    {{ name.errors.value[0] }}

    <input
      v-model="email.value.value"
      label="email"
      :valid="email.valid.value"
      @blur="email.validate()"
    >
    {{ email.errors.value[0] }}

    <input
      v-model="password.value.value"
      label="password"
      type="password"
      :valid="password.valid.value"
      @blur="password.validate()"
    >
    {{ password.errors.value[0] }}

    <input
      v-model="passwordConfirmation.value.value"
      label="passwordConfirmation"
      type="password"
      :valid="passwordConfirmation.valid.value"
      @blur="passwordConfirmation.validate()"
    >
    {{ passwordConfirmation.errors.value[0] }}

    <button
      type="submit"
    >
      submit
    </button>
  </form>
</template>
```

当你这样做 `form.addField('name', initialValue, [list of rules])` 你给球场一个名字, 初始价值和审定规则清单。 名称用于在表单中识别字段. 对于 示例,如果出现 api 错误,您要显示字段错误响应中指定的错误. 若为 `apiRequest` 内 `await form.handleSubmit(() => apiRequest());` 由于 api 验证失败 错误, api 返回的错误将使用名称映射到窗体中的字段 期间指定 `form.addField('fieldName')`。所以确保以同样的方式命名字段 在 api 响应中被命名.

你们可以跑 `yarn dev` 在浏览器中看到基本使用.

### 也可以在字段创建后添加验证规则

```javascript
const newPassword = form.addFiled('newPassword', '', [
  ...someValidationRules
]);

const passwordConfirmation = form.addFiled('passwordConfirmation', '', [
  (value) => rules.confirmed(newPassword.value.value)(value),
]);

const currentPassword = form.addFiled('currentPassword', '', [
  (value) => rawRules.requiredIf([
    newPassword.value.value,
    passwordConfirmation.value.value,
  ], 'Required if new password and password confirmation provided')(value),
]);

newPassword.addRules([
  (value) => rawRules.requiredIf([
    currentPassword.value.value,
    passwordConfirmation.value.value,
  ], 'Required if current password and password confirmation provided')(value),
]);

```

### 需要的习惯实例 如果规则

如果预定义不适合您, 您也可以创建自己的规则 。 这里有一个需要自定义的 TS 示例 如果规则:

```typescript
import {
  LocationTypeEnum,
} from 'project-specific';
import {
  useFormValidator,
  TFormValidatorRule,
} from '@convidera-team/vue-form-validator';

const requiredIf: (type: LocationTypeEnum) => TFormValidatorRule<undefined> = (type) => () => locationType.value.value === type;
const form = useFormValidator();
const address = form.addField(
  'address',
  undefined,
  [
    requiredIf(LocationTypeEnum.PHYSICAL),
  ],
);
```

## 现有验证规则

请检查 [这里](https://npmcn.com/package/%40convidera-team/vue-form-validator/src/form-validator/rules)

## 翻译 `vue-i18n`

#### 重要

添加新翻译时, 请确保同时调整 `src/form-validator/translation/schema.ts` 文件已提供 `typescript` 支助.

软件包提供 `en` 财务报告和审定财务报表 `de` 可用于扩展的翻译 `vue-i18n` 翻译:

```javascript
// English translation file
import {
  en as formValidation,
} from '@convidera-team/vue-form-validator';

export default {
  // other translations
  ...formValidation,
}
```

那样就可以使用 `formValidator` 默认直接翻译而无需指定 每个验证规则的文本 :

```javascript
import {
  useI18n,
} from 'vue-i18n';
import {
  useRules
} from '@convidera-team/vue-form-validator';

const {
  t,
} = useI18n();

const rules = useRules(t);
const form = useFormValidator();

const name = form.addField('name', '', [
  rules.required(),
]);
```

如果您不想使用默认的翻译, 但有自己的翻译, 您可以覆盖翻译 国家 `formValidator` 在您的翻译文件中。 为此,您可以使用同样的密钥 例如在 [语 文](https://npmcn.com/package/%40convidera-team/vue-form-validator/src/form-validator/translation/en.ts) 在您的文档中覆盖 翻译 :

```javascript
// Translation file
export default {
  // other translations
  formValidator: {
    required: 'Custom message for required rule',
    email: 'This field should be email',
    min: 'Custom message for min rule {min}',
    // Other overrides
  },
}

```

也可以以同样的方式增加其他语言的翻译.

## 更改日志

### 1.1.3 国家

-   更新依赖关系

## 常见问题

### @convidera-team/vue-form-validator 是什么？

安装

### 如何安装 @convidera-team/vue-form-validator？

在项目目录运行 npm install @convidera-team/vue-form-validator，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（\>=3）、axios（\>=0\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @convidera-team/vue-form-validator 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @convidera-team/vue-form-validator 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @convidera-team/vue-form-validator 可以商用吗？

@convidera-team/vue-form-validator 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @convidera-team/vue-form-validator 的下载量有多少？

根据 npm 官方下载统计，@convidera-team/vue-form-validator 在 2026/10/11 – 2026/11/09 这 30 天内被下载 2,924 次，日均约 97 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @convidera-team/vue-form-validator 还在维护吗？

最新版本 1\.1\.5 发布于 2025/01/21（1\.8 年前）；至今共发布 8 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/04/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。