Советы по React - проверка с калибровкой

Проверка формы иногда бывает скучной, но необходимой. Существует множество компонентов, одним из наиболее часто используемых является Redux Forms. Сегодня я покажу, как использовать один простой и эффективный компонент под названием Calidation.

Сначала давайте создадим простое приложение для реагирования с помощью create-react-app.

$ create-react-app form-validation-with-calidation

После создания приложения установите калибровку:

$ npm i calidation

Хорошо, давайте изменим некоторые файлы:

В App.css просто добавьте этот код:

...
.container {
   font-family: sans-serif;
   max-width: 200px;
   margin: 20px auto;
}
.input-group {
   margin-bottom: 20px;
}
label {
   display: block;
   font-size: 16px;
   font-weight: bold;
}
input {
   border: 1px solid #666;
   border-radius: 3px;
   padding: 5px 10px;
   display: block;
   width: 100%;
}
.error {
   color: darkred;
}
button {
   appearance: none;
   border: 0;
   border-radius: 3px;
   font-size: 20px;
   padding: 10px 20px;
   background-color: #2ecc71;
   color: white;
}

Замените App.js этим кодом:

import React, { Component, Fragment } from "react";
import { FormValidation } from "calidation";
import logo from './logo.svg';
import './App.css';
const config = {
   username: {
      isRequired: "The Username is required"
   },
   email: {
      isRequired: "The e-mail is required",
      isEmail: "You need enter a valid email, too"
   }
};
class App extends Component {
   render() {
      return (
         <div className="App">
            <header className="App-header">
               <img src={logo} className="App-logo" alt="logo" />
               <h1 className="App-title">React Form Validation with Calidation</h1>
           </header>
         
           <div className="container">
              <h2>User Form</h2>
              <FormValidation config={config}>
                 {({ errors, submitted }) => (
                    <Fragment>
                       <div className="input-group">
                          <label>
                             Username <input name="username" /
                          </label>
                          {submitted && errors.username && <span className="error">{errors.username}</span>}
                       </div>
 
                       <div className="input-group">
                          <label>
                             E-mail <input name="email" type="email" />
                          </label>
                          {submitted && errors.email && <span className="error">{errors.email}</span>}
                       </div>
                       <button type="submit">Submit</button
                    </Fragment>)}
                 </FormValidation>
              </div>
           </div>
        );
     }
  }
export default App;

Наиболее важные части:

1 - Переменная конфигурации, в которую вы можете добавить сообщения проверки для каждой проверки (isRequired, isEmail и т. Д.)

2 - Компонент FormValidation, в который вы можете добавить свою форму как дочернюю

Хорошо, запустите приложение: npm start и voilà!

Вы можете клонировать этот пример здесь: https://github.com/lblima/react-validation-with-calidation

Это все, ребята,

Спасибо за прочтение!