React-validate-framework: лёгкий, простой и удобный компонент для проверки форм в React

React-Validate-Framework — это лёгкий, простой и удобный в использовании компонент для проверки форм на React.

Особенности:

• небольшой размер;
• дружественный API;
• встроенные распространённые методы проверки;
• динамическая проверка;
• возможность комбинировать несколько форм;
• пользовательские правила;
• элегантная асинхронная проверка на основе async.

Начало работы:

1. Установите пакет: npm i react-validate-framework --save.

2. Импортируйте необходимые компоненты: import formConnect, { Checkbox, Radio, Select, Text, Textarea, Message } from 'react-validate-framework'.

3. Определите схемы проверки: const schemas = { email: { rules: 'required | isEmail | maxLength(32) | validateFromServer', messages: '不能为空 | 请输入有效的电子邮件地址 | 不能超过{{param}}个字符 | 邮箱被占用', }, hobby: { rules: 'requiredField(email) | selectLimit(2)', messages: '邮件和爱好至少填写一项 | 至少选择{{param}}项', } };

4. Создайте методы проверки: const methods = { selectLimit(field, param) { if (Array.isArray(field.value)) { return field.value.length >= param; } return false; }, requiredField(field, param) { const otherField = this.fields[param]; return this.required(field) || (otherField.result && this.required(otherField)); }, async validateFromServer(field, param) { return await doServerAPI(); } }

5. Используйте компонент формы: @formConnect(schemas, methods) export default class BasicForm extends React.Component { static propTypes = { formControl: PropTypes.object, };

constructor(props) { super(props); props.formControl.init({ email: '', phone: '', }, { static: 'form-control', success: 'valid-success', error: 'valid-error', }); }

handleSubmit = async () => { const { formControl } = this.props; if (await formControl.validate()) { // Submit. } };

render() { return (

6. Компоненты формы: Checkbox, Radio, Select, Text, Textarea и Message.

7. Для использования собственных компонентов формы укажите value и onChange:

const { formControl: { fields, onFormChange }, } = this.props;

return ( );

8. API: | Имя | Тип | Возвращаемое значение | setState | Описание | | :--- | :--- | :--- | :--- | :--- | | fields | Object | | | Коллекция полей | | isAllValid | Boolean | | | Состояние глобальной проверки | | formValues | Object | | | Список значений формы | | init | function | this | false | Инициализация значений формы и класса | | initClassNames | function | this | false | Инициализация класса | | onFormChange | function | | true | Метод прослушивания событий изменения формы | | changeValues | function | this | true | Пользовательский метод изменения формы | | validate | function | Promise => Boolean | true | Проверка всех полей | | validateByNames | function | Promise => Boolean | true | Проверка компонента по имени | | addValues | function | this | true | Добавление одного или нескольких значений | | removeValues | function | this | true | Удаление одного или нескольких значений, без параметров удаляет все | | resetValues | function | this | true | Сброс одного или нескольких значений, без параметров сбрасывает все | | addSchemas | function | this | false | Добавление одного или нескольких правил проверки | | removeSchemas | function | this | true | | 删除一个或多个验证规则，无参数则删除所有 | | formDidChange | function | | | 表单改变回调 |

更新日志

0.15.x

• Удалён параметр delay в FormControl.
• В свойствах (props) компонентов формы добавлен параметр delay.