A lightweight and extensible React validation component
This component relies on react
.
Demo: https://minjieliu.github.io/react-validate-framework
You can check out the code to see examples.
npm i react-validate-framework --save
Import:
import formConnect, {
Checkbox,
Radio,
Select,
Text,
Textarea,
Message,
} from 'react-validate-framework';
Rules and messages like this:
const schemas = {
email: {
rules: 'required | isEmail | maxLength(32)',
messages: 'Can not be empty! | Please enter a valid email address. | Can not exceed {{param}} characters.',
},
hobby: {
rules: 'required | selectLimit(2)',
messages: 'Can not be empty! | Select at least {{param}}.',
},
};
const methods = {
selectLimit(field, param) {
if (Array.isArray(field.value)) {
return field.value.length >= param;
}
return false;
},
};
The BasicForm like this:
const BasicForm = () => (
<div className="form-group">
<Text
name="email"
placeholder="Please input your email"
/>
<Message className="valid-error-message" name="email" />
</div>
);
Export the module:
export default formConnect(schemas, methods)(BasicForm);
Finally, sets the initialized value:
<BasicForm
ref={(ref) => {
this.basicForm = ref;
}}
classNames={{
static: 'form-control',
success: 'valid-success',
error: 'valid-error',
}}
values={this.state.formValues}
/>
// The values like this { email: '', hobby: ['2'] }
Validate methods can refer to validate-framework-utils
Checkbox
Radio
Select
Text
Textarea
Message
The name
attribute is required in form components, Other parameters can be overridden.
Of course, you can also use unencapsulated form components, just specify value
and onChange
on the line:
const {
fields,
onChange,
} = this.props;
return (
<input
className={fields.email.className}
name="email"
type="text"
onChange={onChange}
value={fields.email.value}
placeholder="Please input your email"
/>
);
name | type | required | default | description |
---|---|---|---|---|
values | Object | false | Key-value pairs for name and value
|
|
classNames | Object | false | {} | Its key value contains static , success , error
|
name | type | default | setState | description |
---|---|---|---|---|
fields | Object | The collection of fields | ||
isAllValid | Boolean | Gets the global validation status | ||
getFormValues | function | Gets a list of form values | ||
initValues | function | false | Initializes the form value | |
initClassNames | function | false | Initializes the classNames | |
onChange | function | true | Form change event listener | |
changeValues | function | true | Customize to change the values | |
validate | function | true | Validate all fields | |
validateByNames | function | true | Validate the component through names | |
addFields | function | true | Add one or more fields | |
removeFields | function | true | Deletes one or more fields | |
addSchemas | function | false | Add one or more validation rules | |
removeSchemas | function | true | Delete one or more validation rules |
You can either pass in values
as an argument, or call the initValues
method when the form is initialized.
You can invoke the changeValues
method to simulate a form change event.