# arv-validate-vue 中文文档

规范地址：https://npmcn.com/package/arv-validate-vue/

版本：1\.1\.4
npm 元数据更新时间：2026-11-03T01:24:23.438Z
中文译文更新时间：2026-11-03T03:58:04.379Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/arv-validate-vue
原文对照：https://npmcn.com/package/arv-validate-vue/?lang=original
项目主页：https://github.com/jccallo/arv-validate#readme
源码仓库：https://github.com/jccallo/arv-validate

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

- 包体积（解压后）：17 kB，6 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=16\.0\.0
- 运行依赖：0 个
- peer 依赖：vue ^3\.0\.0，arv-validate ^1\.1\.4
- 首次发布：2026-10-24T04:46:05.147Z
- 最新版本发布：2026-11-03T01:24:23.290Z
- 已发布版本数：7（近 12 个月 7 个）

## 中文简介

官方响应式Vue 3适配器，用于arv-validate （Composition API, Vite, next）

## 安装

```sh
npm install arv-validate-vue
```

也可以使用：`pnpm add arv-validate-vue`、`yarn add arv-validate-vue`、`bun add arv-validate-vue`

## README

# arv-validate-vue

> 官方的反应 [Vue 3](https://vuejs.org/) 适配器的 [arv-validate](https://www.npmjs.com/package/arv-validate) 使用组合API (`<script setup>`）。

[![npm version](https://img.shields.io/npm/v/arv-validate-vue.svg)](https://www.npmjs.com/package/arv-validate-vue) [![license](https://img.shields.io/npm/l/arv-validate-vue.svg)](https://github.com/jccallo/arv-validate/blob/main/LICENSE) [![Vue 3](https://img.shields.io/badge/vue-3.x-brightgreen.svg)](https://vuejs.org/)

[英语](https://github.com/jccallo/arv-validate/blob/main/README.md) | [西班牙语](https://github.com/jccallo/arv-validate/blob/main/README.es.md)

* * *

## 安装

```bash
npm install arv-validate arv-validate-vue
```

* * *

## 快速入门

```html
<script setup>
import { useValidator, required, email, minLength, trim } from 'arv-validate-vue'

const v = useValidator(
  {
    username: '',
    email: ''
  },
  {
    username: [required(), minLength(3), trim()],
    email: [required(), email(), trim()]
  }
)

const onSubmit = async () => {
  const isValid = await v.validate()
  if (!isValid) return

  // Clean, sanitized data ready for backend API
  const payload = v.getPayload()
  await fetch('/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  })
}
</script>

<template>
  <form @submit.prevent="onSubmit" class="form">
    <div class="form-group">
      <label for="username">Username</label>
      <input
        id="username"
        v-model="v.values.username"
        @blur="v.touch('username')"
        :class="{ 'is-invalid': v.hasError('username') }"
      />
      <span v-if="v.hasError('username')" class="error-text">
        {{ v.getError('username') }}
      </span>
    </div>

    <div class="form-group">
      <label for="email">Email</label>
      <input
        id="email"
        type="email"
        v-model="v.values.email"
        @blur="v.touch('email')"
        :class="{ 'is-invalid': v.hasError('email') }"
      />
      <span v-if="v.hasError('email')" class="error-text">
        {{ v.getError('email') }}
      </span>
    </div>

    <button type="submit" :disabled="!v.isValid">
      Submit
    </button>
  </form>
</template>
```

* * *

## 关键特性

-   🔄 **原生Vue 3反应性**：直接建立在Vue 3的 `reactive` 和 `computed` 原语。
-   ⚡ **实时验证**：即时反馈用户类型或模糊。
-   🧹 **自动清理**：自动注销监听器 `onUnmounted`． 没有内存泄漏。
-   📦 **一体化的出口**：重新导出所有核心规则、转换器和i18n helper。直接从 `'arv-validate-vue'`.

* * *

## 外部组件的使用（例如Pinia Stores）

在Vue组件中(`<script setup>`)，清理工作是 **100%的自动**． 在组件生命周期之外创建验证器时（如在Pinia存储或可组合模块中），调用 `v.dispose()` 发布订阅：

```javascript
import { defineStore } from 'pinia'
import { useValidator, required, email } from 'arv-validate-vue'

export const useAuthStore = defineStore('auth', () => {
  const v = useValidator(
    { email: '', password: '' },
    {
      email: [required(), email()],
      password: [required()]
    }
  )

  const logout = () => {
    v.dispose() // Manually cleans up listeners on logout
  }

  return { v, logout }
})
```

* * *

## API参考(`useValidator`）

`useValidator(initialData, schema, options)` 返回:

| 财产 | 类型 | 描述 |
| --- | --- | --- |
| `v.values` | `Proxy (reactive)` | 双向反应值对象(`v-model`） |
| `v.isValid` | `boolean` | 表格有效吗？（在模板中响应并计算） |
| `v.isDirty` | `boolean` | 有修改值吗？(活性) |
| `v.hasError(field)` | `function` | 场地是否有错误并且已被触摸？(活性) |
| `v.getError(field)` | `function` | 错误消息字符串或 `null` (活性) |
| `v.isValidating(field?)` | `function` | 异步验证规则正在运行吗？ |
| `v.touch(field)` | `function` | 标记触碰过的领域(`@blur`） |
| `v.untouch(field)` | `function` | 未标记的领域触及 |
| `v.validate()` | `async function` | 触摸所有字段并运行所有验证 |
| `v.reset(newValues?)` | `function` | 重置表单以清除初始快照或使用新值进行更新 |
| `v.setValues(patch)` | `function` | 同时更新多个字段 |
| `v.getPayload()` | `function` | 返回准备好API的经过处理的数据 |
| `v.dispose()` | `function` | 手动订阅清理 |

* * *

## 文档

-   ⚡ **[完整的Vue 3指南（9个示例）（英文）](https://github.com/jccallo/arv-validate/blob/main/docs/VUE.en.md)**
-   ⚡ **[Guía完成第3段至Español](https://github.com/jccallo/arv-validate/blob/main/docs/VUE.md)**
-   📋 **[规则与变形金刚目录（英文）](https://github.com/jccallo/arv-validate/blob/main/docs/RULES.md)**
-   📋 **[Catálogo de Reglas y Transformadores （Español）](https://github.com/jccallo/arv-validate/blob/main/docs/REGLAS.md)**
-   📖 **[核心不可知论文档](https://github.com/jccallo/arv-validate/blob/main/docs/DOCUMENTATION.md)**

* * *

## 许可证

麻省理工学院© [jccallo](https://github.com/jccallo)

## 常见问题

### arv-validate-vue 是什么？

官方响应式Vue 3适配器，用于arv-validate （Composition API, Vite, next）

### 如何安装 arv-validate-vue？

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

### arv-validate-vue 支持 TypeScript 吗？

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

### arv-validate-vue 支持 ESM 还是 CommonJS？

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

### arv-validate-vue 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=16\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### arv-validate-vue 可以商用吗？

arv-validate-vue 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### arv-validate-vue 还在维护吗？

最新版本 1\.1\.4 发布于 2026/11/03（今天）；至今共发布 7 个版本，其中过去 12 个月发布了 7 个；首次发布于 2026/10/24。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。