@lxjx/use-verify v0.1.0

• Introduce
• Example
• Install
• Usage
• API
  • createUseVerify(config) => useVerify()
  • useVerify(rules, defaulModel) => [bonus, setField, verify]
• LICENSE

Introduce

用于表单验证的react自定义钩子，使用非常简单。

React custom hook for form validation, super easy to use.

Example

Install

yarn add @lxjx/use-verify

Usage

step1

import createUseVerify from '@lxjx/use-verify';

step2

传入配置，生成钩子

Pass in the configuration, generate hooks

const useVerify = createUseVerify({
  // 默认是zh-cn，传入en将显示英文提示信息
  // The default is zh-cn, the incoming en will display the English prompt information.
  // language: 'en',
    
  // 格式化返回信息
  // Incoming configuration generation hook
  formatBonus(source) {
    // source.hasFeedback = true;
    return source;
  }
});

step3

以antd为例。 你也完全可以通过返回的bonus来定制自己的form组件

You can customize your form component by returning the bonus.

import { Form, Input, DatePicker, Checkbox } from 'antd';

const Test1 = () => {
	
  let [bonus, setField, verify] = useVerify(rules, {
    name: 'l',
    time: '2020-10-20 10:00:00',
  });

  return (
    <div className={sty.wrap}>
      Test1
      <div>
        <Form onSubmit={(e) => {
          e.preventDefault();
          console.log(verify.verify());
        }}>
          <Form.Item
            label="姓名"
            hasFeedback
            {...bonus.name}
          >
            <Input
              placeholder="姓名"
			  // 如果包含默认值，可以将其配置为受控组件。 对于对value类型有特殊要求的组件（如antd的picker需要value为moment对象，直接在初始化时使用defaulValue指定值即可，见 (1
			  // If you include a default value, you can configure it as a controlled component. For components that have special requirements for value types (such as antd picker requires value for moment object, directly use defaulValue to specify the value during initialization, see ↓ (1
              value={verify.model.name}  
              onChange={({ target }) => setField('name', target.value)} />
          </Form.Item>

          <Form.Item
            label="简介"
            {...bonus.desc}>
            <Input
              placeholder="描述一下自己吧！"
              onChange={({ target }) => setField('desc', target.value)} />
          </Form.Item>

          <Form.Item
            label="出生日期"
            {...bonus.time}
          >
            <DatePicker
              showTime
              placeholder="选择您的出生日期"
			  // (1:
              defaultValue={moment('2020-10-20 10:00:00')}
              onChange={(value, dateString) => setField('time', dateString)} />
          </Form.Item>

          <Form.Item
            label="爱好"
            {...bonus.like}>
            <Checkbox.Group
              options={options}
              value={verify.model['like']}
              onChange={(e) => setField('like', e)} />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" >
              提交
            </Button>
          </Form.Item>

        </Form>
      </div>
    </div>
  );
};

API

createUseVerify(config) => useVerify()

传入配置生成钩子

Incoming configuration generation hook

config.language <str>

提示语言，默认为zh-cn

config.formatBonus <func>

所有传递给表单项的props都会先经过此函数转换

All props passed to the form item will be converted by this function first.

// by default
formatBonus(source) {
    return source;
}

useVerify(rules, defaulModel) => bonus, setField, verify

验证钩子

verify hook

rules <obj>

验证规则，具体见 validatejs

defaulModel <obj>

默认的表单值

Default form value

bonus&setField <obj&func>

传递给你的验证结果展示组件&收集变更信息

pass the verification result display component to you&Collect change information

<Form.Item
  label="姓名"
  hasFeedback
  {...bonus.name}
>
  <Input
    placeholder="姓名"
	// 在有默认值的情况下，需要将表单设置为受控组件
	// With a default value, you need to set the form as a controlled component
    value={verify.model.name}  
	// 在你的表单组件更新时使用setField来设置变更
	// Use setField to set changes when your form component is updated
    onChange={({ target }) => setField('name', target.value)} />
</Form.Item>

verify <object>

verify.model <object>

当前的已参与验证的所有表单值

Current form values that have been validated

verify.verify() <func> => isPass, models, bonus

对所有表单项进行验证, 返回验证结果、所有的表单值、以及验证信息

Validate all form items, return verification results, all form values, and verification information

LICENSE

MIT