# taro-hook-form

> 针对taro的轻量级表单验证库

Latest version **0.2.1** (published 2020-08-14) · ISC license · 0 weekly downloads

## Install

```sh
npm install taro-hook-form
pnpm add taro-hook-form
yarn add taro-hook-form
bun add taro-hook-form
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2020-08-14 |
| First published | 2020-08-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 58.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | followmark.chen |
| Keywords | taro, forms, taro-use-form, taro-hook-form, form-validation, react-hook |

## Links

- npm: https://www.npmjs.com/package/taro-hook-form
- Repository: https://github.com/chongqiangchen/taro-hook-form
- Homepage: https://github.com/chongqiangchen/taro-hook-form#readme
- Issues: https://github.com/chongqiangchen/taro-hook-form/issues
- npm.io page: https://npm.io/package/taro-hook-form

## 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

- 0.2.1 (latest) — 2020-08-14
- 0.2.0 — 2020-08-14
- 0.1.0 — 2020-08-13

## README

# Taro-Hook-Form

易于处理 taro 表单的库 - hooks

## 安装

```
  npm install taro-hook-form
```

## 快速开始

```
import {useForm} from 'taro-hook-form';

export function TestInput() {
  const { register, handleSubmit, errors, setValue, getValue } = useForm({
    verifyLazy: true
  });

  useEffect(() => {}, [errors]);

  const onSubmit = e => {
    console.log(e);
  };

  return (
    <View>
      <View>原生Input：</View>
      <Input
        ref={ref => {
          register(ref, {
            required: {
              rule: true,
              error: "请填写Input"
            }
          });
        }}
        name="alias"
        type="text"
      />
      <View>TaroUI AtInput: </View>
      <AtInput
        ref={ref => {
          register(ref, {
            required: {
              rule: true,
              error: "请填写AtInput"
            }
          });
        }}
        name="alias3"
      ></AtInput>
      <Button onClick={handleSubmit(onSubmit)}>提交</Button>
    </View>
  );
}
```

## useForm API

参数：

verifyLazy：boolean - 是否关闭在输入时就校验输入信息

返回：

register:Function - 注册

    参数：
      ref - Ref,
      ops - { required , pattern} （注：可由用户自己定义配置, 见底部VerifyActions API）

setValue:Function - 设置

    参数:
     nameAndValue: {name: value}

getValue:Function - 获取 Value:

    参数:
      name: string

handleSubmit:Function - 处理提交事件:

    参数：
      func - 用户自己的提交事件函数 ，返回内容为当前值绑定的相关值

errors: object - 错误信息

// 待补充
formValues,
isCompleted,

## VerifyActions API

用于自定义相关规则的入口

`add(value, ruleObj = {rule: true, error: ""})` - 增加自定义规则

注： 如若成功必须返回 SUCCESS_FLAG， 失败直接返回指定 error

```
示例：

import { VerifyActions, SUCCESS_FLAG } from "taro-hook-form";

...
   useEffect(() => {
    const required = (value, ruleObj = { rule: true, error: "" }) => {
      console.log(value);
      if (!ruleObj.rule) {
        return SUCCESS_FLAG;
      }

      if (value === undefined || value === null) {
        return ruleObj.error;
      }

      // 针对 仅仅输入空格情况
      if (!value.match(/[^\s]/)) {
        return ruleObj.error;
      }

      return SUCCESS_FLAG;
    };

    VerifyActions.add({ required });
  }, []);
```

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