arv-validate-vue
官方的反应 Vue 3 适配器的 arv-validate 使用组合API (
<script setup>）。
安装
npm install arv-validate arv-validate-vue
快速入门
<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() 发布订阅：
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个示例）（英文）
- ⚡ Guía完成第3段至Español
- 📋 规则与变形金刚目录（英文）
- 📋 Catálogo de Reglas y Transformadores （Español）
- 📖 核心不可知论文档
许可证
麻省理工学院© jccallo