# verify-form

> Verify Form Component

Latest version **1.0.8** (published 2022-12-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install verify-form
pnpm add verify-form
yarn add verify-form
bun add verify-form
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2022-12-13 |
| First published | 2022-06-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 12.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Simon He |
| Maintainers | simon_he |
| Keywords | VerifyForm, verify-form, vue |

## Links

- npm: https://www.npmjs.com/package/verify-form
- Repository: https://github.com/Simon-He95/verify-form
- Homepage: https://verify-form.hejian.club/
- Issues: https://github.com/Simon-He95/verify-form/issues
- npm.io page: https://npm.io/package/verify-form

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.2.36
- [@vueuse/core](https://npm.io/package/@vueuse/core.md) ^8.1.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.8 (latest) — 2022-12-13
- 1.0.7 — 2022-06-17
- 1.0.6 — 2022-06-17
- 1.0.5 — 2022-06-17
- 1.0.4 — 2022-06-17
- 1.0.2 — 2022-06-17
- 1.0.1 — 2022-06-11
- 1.0.0 — 2022-06-11
- 0.0.14-beta.3 — 2022-06-04
- 0.0.14-beta.2 — 2022-06-04
- 0.0.14-beta.1 — 2022-06-04
- 0.0.12 — 2022-06-04
- 0.0.11 — 2022-06-04
- 0.0.10 — 2022-06-04
- 0.0.6 — 2022-06-04
- … 1 more at https://npm.io/package/verify-form/versions

## README

## 100行代码实现轻量级的表单验证组件

[live demo](https://verify-form.hejian.club/)

# API

- initial-regular :Boolean // 首次加载就对初始化值进行rules的规则校验
- inline :Boolean // 将regular-form-fields改为行内元素
- 
# refEl

- $reset :Function // 清空form下所有的错误消息
- $clear :Function // 清空form下所有表单内容
- getStatus : Function // 获取form的状态,true表明当前所有rules配置都通过了，否则存在校验错误项
- getErrorMsg : Function // 获取form的错误消息
- autoFocus :Function // 自动聚焦第一个错误项

# FormData数据结构

```js
const formData = reactive({
  age: '',
  name: '',
  country: '',
  address: '',
  rules: {
    age: [
      /* required */ val => !!val || 'Required',
      /* number */ val => !isNaN(Number(val)) || 'Expected number',
      /* length */ val =>
        val <= 18 ? 'You are too young' : val >= 100 ? 'You are too old' : '',
    ],
    name: [
      /* required */ val => !!val || 'Required',
      /* length */ val => val.length > 2 || 'Length needs to be more than 2',
    ],
  },
})
```

# 安装

```shell
npm install -D verify-form
```

# 注册

```
import { createApp } from 'vue'
import { VerifyForm, VerifyFormField } from 'verify-form'

const app = createApp(App)
app.component('VerifyForm', VerifyForm)
app.component('VerifyFormField', VerifyFormField)
app.mount('#app')
```
# 使用

![script](./assets/script.jpg)
![template](./assets/template.jpg)


# 依赖
`vue`

---
_Source: https://npm.io/package/verify-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._