@lxjx/react-verify NPM

✨Features

Adapt any form control with output interface (onChange, onInput)
Built-in verification system based on validatejs, contains a large number of common validators, and can customize the validator and use asynchronous validator
Rich APIs for various scenarios, such as disabling form items, dynamically adding form items, dynamically modifying validation rules, resetting, and more.
A fully controllable validation status display, you can use a custom FormItem component to display the validation results, or you can use the off-the-shelf component library (eg. antd) directly.

📦 Installation

npm install @lxjx/react-verify
// or
yarn add @lxjx/react-verify

🎬Example

Basic

Basic use example

complex

Contains a complete API example

📃API

`reactVerify(option)`

reactVerify(option): connect(Component)

option.format

type: function

default： (bonus) => bonus

You can change the default authentication format passed to a form item by setting this method.

option.rules

type: { [key: string]: rule<ValidateRule> }

default: {}

Used to validate the collected form values, consistent with the rules supported by validatejs.validatejs

option.language

type: 'en' | ' zh-cn '

default: ' zh-cn '

Set the language of the error message

connect(Component)

The reactVerify() method returns a connection function that passes in your form container component to receive the various useful information it returns.

reactVerify.validate

The validatejs factory function is configured via the base.

`Props`

methods

init(defaultField: object)
Initialize, pass in all form fields and initial values, and set bonus.required according to the validation rules of each form

setField(fieldKey: string, fieldValue: any)

Set the value of an item in the form and trigger verification

patchRule(ruleItem\<validateRuleItem>)

Modify a validation rule, using a setState similar to react

verify(): isPass

Trigger validation of all form items, usually before the form is uploaded.

disable(fieldKey)

Specify and disable the form item corresponding to a field, disable the item's validation rules and the error, validation information, field values will be hidden from the return, you can re-enable them via the enable method

enable(fieldKey)

Enable a form

enableAll()

Enable all forms

addField(fieldKey: string, fieldValue: any, ruleItem\<validateRuleItem>)

Dynamically add a form and trigger validation of the form

setFields(fieldMap: object)

Pass an object to set multiple form values at the same time, the content of the object is the form key-value pair

reset()

Set all form values to their initial values

Set the initial value only for the data layer, you need to set the component to be reset as a controlled component to achieve synchronous changes in the view layer.

property

error: object

Contains full validation error information, no options with no error message

error {
    [key: string]: string[]
}

bonus: object

The most commonly used properties, returning a full validation state, receiving them through a custom display component and then displaying some user-friendly hints. It can be converted to a format suitable for your component by the option.format method.

bonus {
    tip: string;	// error message
    status: 'success' | 'error';	// Semantic verification status
    changed: boolean;	// Whether the value of the form item has been changed
    required?: boolean;		// Whether it must be obtained from the validation rules
    disabled?: boolean;		// This attribute is passed when an item is disabled.
    pending?: boolean;		// A temporary attribute indicating whether asynchronous verification is in progress
}

fileds: object

Contains all current form values