@vtils/usedeprecated

vtils 的 React Hooks 封装。

https://fjc0k.github.io/vtils/use

安装

# yarn
yarn add @vtils/use

# or, npm
npm i @vtils/use --save

你也可通过 CDN 安装，然后使用全局变量 vhooks 访问相关工具：

<script src="https://cdn.jsdelivr.net/npm/@vtils/use@2.31.1/lib/index.umd.min.js" crossorigin="anonymous"></script>

目录

👇	👇	👇	👇
useEasyValidator	useLiveEasyValidator

列表

useEasyValidator

源码 | API | 回目录

数据校验器。

const [name, setName] = useState('')
const [pass, setPass] = useState('')
const ev = useEasyValidator({ name, pass }, [
  {
    key: 'name',
    required: true,
    message: '姓名不能为空',
  },
  {
    key: 'pass',
    test: data => data.pass.length >= 6,
    message: '密码至少应为6位',
  },
])
const handleRegisterClick = useCallback(() => {
  ev.validate().then(res => {
    if (res.valid) {
      console.log(res.data)
    } else {
      console.log(res.firstUnvalidRuleMessage)
    }
  })
}, [])

useLiveEasyValidator

源码 | API | 回目录

实时数据校验器。

const [name, setName] = useState('')
const [pass, setPass] = useState('')
const evResult = useLiveEasyValidator({ name, pass }, [
  {
    key: 'name',
    required: true,
    message: '姓名不能为空',
  },
  {
    key: 'pass',
    test: data => data.pass.length >= 6,
    message: '密码至少应为6位',
  },
])
const button = (
  <Button disabled={!evResult.valid}>
    提交
  </Button>
)

许可

MIT ©️ Jay Fong