# react-validate-simply

> validate react

Latest version **1.1.1** (published 2017-03-31) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-validate-simply
pnpm add react-validate-simply
yarn add react-validate-simply
bun add react-validate-simply
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2017-03-31 |
| First published | 2017-03-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 26 |
| Known vulnerabilities | 0 (+10 in 4 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | 404nan |
| Maintainers | 404nan |
| Keywords | react, validate |

## Links

- npm: https://www.npmjs.com/package/react-validate-simply
- Repository: https://github.com/ql9075/react-validate-simply
- Homepage: https://github.com/ql9075/react-validate-simply#readme
- Issues: https://github.com/ql9075/react-validate-simply/issues
- npm.io page: https://npm.io/package/react-validate-simply

## Dependencies (26)

- [open](https://npm.io/package/open.md) 0.0.5
- [react](https://npm.io/package/react.md) ^15.4.2
- [eslint](https://npm.io/package/eslint.md) 1.6.0
- [rimraf](https://npm.io/package/rimraf.md) ^2.4.4
- [express](https://npm.io/package/express.md) ^4.14.0
- [webpack](https://npm.io/package/webpack.md) 1.12.2
- [cross-env](https://npm.io/package/cross-env.md) ^3.1.3
- [node-sass](https://npm.io/package/node-sass.md) ^4.5.1
- [react-dom](https://npm.io/package/react-dom.md) ^15.4.2
- [babel-core](https://npm.io/package/babel-core.md) ^6.14.0
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [css-loader](https://npm.io/package/css-loader.md) ^0.27.3
- [sass-loader](https://npm.io/package/sass-loader.md) ^6.0.3
- [babel-loader](https://npm.io/package/babel-loader.md) ^6.2.5
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^5.8.38
- [babel-polyfill](https://npm.io/package/babel-polyfill.md) ^6.8.0
- [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.5.0
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^1.15.1
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.3.13
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) 3.5.1
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^2.22.0
- [babel-preset-stage-1](https://npm.io/package/babel-preset-stage-1.md) ^6.5.0
- [webpack-dev-middleware](https://npm.io/package/webpack-dev-middleware.md) ^1.6.1
- [webpack-hot-middleware](https://npm.io/package/webpack-hot-middleware.md) ^2.12.2
- [extract-text-webpack-plugin](https://npm.io/package/extract-text-webpack-plugin.md) ^1.0.1
- [babel-plugin-transform-runtime](https://npm.io/package/babel-plugin-transform-runtime.md) ^6.15.0

## 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.1.1 (latest) — 2017-03-31
- 1.0.1 — 2017-03-31
- 1.0.0 — 2017-03-29

## README

## 前言

基于react校验input等控件, 一般用于直接校验不提交表单需求。


## 示例

#### 注意：由于涉及大量的 ES6/7 等新属性，nodejs 最好是 6.0 以上版本 
```
git clone https://github.com/ql9075/react-validate-simply.git

npm install

npm run start

访问 http://localhost:7777/app.html
```

### 使用方法

安装
```
npm i react-validate-simply

```
引用
```
import Validate from 'react-validate-simply';

```
使用

```
inputChange({...args}, validator, msg) { 
  // args[0] 事件方法
  // validator 校验是否成功
  // msg 校验失败提示
}

1.使用默认提示

<Validate >
  <input 
    type="text"
    name="mobile"
    onChange={this.inputChange}
    onBlur={this.inputChange}
    data-rules={{
      isDefaultMsg:true,
      validator:[{
        name:'checkTel'
      }]
    }}
  />
</Validate>

2.自定义校验方法

<Validate validators={{
  letters: (val) => {
    return {
      result: () => {
        return (/^[A-Za-z]+$/).test(val)
      },
      msg: '输入字母吧'
    };
  }
 }}>
   <section>
     <label>
      输入手机号：
      </label>
      <input 
        type="text"
        name="mobile"
        onChange={this.inputChange}
        onBlur={this.inputChange}
        data-rules={{
          isDefaultMsg:true,
          validator:[{
            name:'aaa'
          }]
        }}
      />
  </section>
</Validate>
```

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