React-validate-framework: лёгкий расширяемый компонент для валидации в React

React-validate-framework — это лёгкий и расширяемый компонент валидации для React.

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

• Лёгкий вес.
• Расширяемость.

Ссылки:

1. npm: https://www.npmjs.com/package/react-validate-framework.
2. Travis CI: https://travis-ci.org/MinJieLiu/react-validate-framework?branch=master.
3. Coverage Status: https://coveralls.io/repos/github/MinJieLiu/react-validate-framework?branch=master.
4. GitHub: https://github.com/MinJieLiu/react-validate-framework.
5. Демо: https://minjieliu.github.io/react-validate-framework.
6. Код для просмотра примеров: https://minjieliu.github.io/react-validate-framework.
7. Chinese README: README-zh_CN.md.

Как использовать?

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: 'Can not be empty! | Please enter a valid email address. | Can not exceed {{param}} characters. | | The email already exists.',
     },
     hobby: {
       rules: 'requiredField(phone) | selectLimit(2)',
       messages: 'email and hobby at least one entry! | Select at least {{param}}.',
     },
   };
   
   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();
     },
   };

4. Создайте базовую форму:

   @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 (
         <div className="form-group">
           <Text
             name="email"
             placeholder="Please input your email"
             delay={100} // Asynchronous validation
           />
           <Message className="valid-error-message" name="email" />
           <Text name="phone" />
           <button onClick={this.handleSubmit}>提交</button>
         </div>
       );
     }
   }

5. Методы проверки можно найти в validate-framework-utils.

Компоненты формы:

• Checkbox.
• Radio.
• Select.
• Text.
• Textarea.
• Message.

Атрибут name обязателен для компонентов формы, delay — время задержки, другие параметры можно переопределить.

Также можно использовать неинкапсулированные компоненты формы, просто указав value и onChange:

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

return (
  <input
    className={fields.email.className}
    name="email"
    type="text"
    onChange={onFormChange}
    value={fields.email.value}
    placeholder="Please input your email"
  />
);

API:

Вы можете вызвать метод changeValues, чтобы смоделировать событие изменения формы.

Журнал обновлений

0.15.x

• Убрать параметр delay из FormControl.
• Добавить параметр delay в props компонента формы.