Главная Продвижение в интернете Пример валидации форм в React

Пример валидации форм в React

Продвижение в интернете

Авг 5, 2021

0 27

В этой статье мы рассмотрим валидацию форм в React.JS на простом примере. Проверка данных, вводимых пользователем в форму – необходимая часть любого интерактивного приложения.

Это пошаговое руководство наглядно продемонстрирует, как можно реализовать базовую проверку различных типов данных – имени пользователя, адреса электронной почты. При вводе информации неверного типа предусмотрен вывод сообщения об ошибке.

Для оформления формы мы будем использовать фреймворк Bootstrap. Форма включает в себя три поля – для ввода имени пользователя, адреса электронной почты и произвольного комментария. Мы будем проверять корректность данных, указанных в этих полях. Результат будет идентичен скриншоту, приведенному ниже.

Шаг 1. Установка React

Если библиотека React у вас еще не установлена, скачайте установочные файлы и запустите инсталляцию следующей командой:

npx create-react-app my-app

Шаг 2. Создание компонента для формы

На этом этапе мы создадим файл компонента DemoForm.js, который должен размещаться по адресу – src/DemoForm.js. Добавим в этот файл код для проверки данных в форме:

import React from 'react';

  

class DemoForm extends React.Component {

    constructor() {

    super();

    this.state = {

      input: {},

      errors: {}

    };

     

    this.handleChange = this.handleChange.bind(this);

    this.handleSubmit = this.handleSubmit.bind(this);

  }

     

  handleChange(event) {

    let input = this.state.input;

    input[event.target.name] = event.target.value;

  

    this.setState({

      input

    });

  }

    

  handleSubmit(event) {

    event.preventDefault();

  

    if(this.validate()){

        console.log(this.state);

  

        let input = {};

        input["name"] = "";

        input["email"] = "";

        input["comment"] = "";

        this.setState({input:input});

  

        alert('Demo Form is submited');

    }

  }

  

  validate(){

      let input = this.state.input;

      let errors = {};

      let isValid = true;

  

      if (!input["name"]) {

        isValid = false;

        errors["name"] = "Please enter your name.";

      }

  

      if (!input["email"]) {

        isValid = false;

        errors["email"] = "Please enter your email Address.";

      }

  

      if (typeof input["email"] !== "undefined") {

          

        var pattern = new RegExp(/^(("[w-s]+")|([w-]+(?:.[w-]+)*)|("[w-s]+")([w-]+(?:.[w-]+)*))(@((?:[w-]+.)*w[w-]{0,66}).([a-z]{2,6}(?:.[a-z]{2})?)$)|(@[?((25[0-5].|2[0-4][0-9].|1[0-9]{2}.|[0-9]{1,2}.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2}).){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})]?$)/i);

        if (!pattern.test(input["email"])) {

          isValid = false;

          errors["email"] = "Please enter valid email address.";

        }

      }

  

      if (!input["comment"]) {

        isValid = false;

        errors["comment"] = "Please enter your comment.";

      }

  

      this.setState({

        errors: errors

      });

  

      return isValid;

  }

     

  render() {

    return (

      <div>

        <h1>React Form Validation Example - ItSolutionStuff.com</h1>

        <form onSubmit={this.handleSubmit}>

  

          <div class="form-group">

            <label for="name">Name:</label>

            <input 

              type="text" 

              name="name" 

              value={this.state.input.name}

              onChange={this.handleChange}

              class="form-control" 

              placeholder="Enter name" 

              id="name" />

  

              <div className="text-danger">{this.state.errors.name}</div>

          </div>

  

          <div class="form-group">

            <label for="email">Email Address:</label>

            <input 

              type="text" 

              name="email" 

              value={this.state.input.email}

              onChange={this.handleChange}

              class="form-control" 

              placeholder="Enter email" 

              id="email" />

   

              <div className="text-danger">{this.state.errors.email}</div>

          </div>

  

          <div class="form-group">

            <label for="comment">Comment:</label>

            <textarea 

              name="comment"

              value={this.state.input.comment} 

              onChange={this.handleChange}

              placeholder="Enter comment"

              class="form-control" />

  

              <div className="text-danger">{this.state.errors.comment}</div>

          </div>

             

          <input type="submit" value="Submit" class="btn btn-success" />

        </form>

      </div>

    );

  }

}

  

export default DemoForm;

Создание собственной библиотеки валидации для React: основы (часть 1)

Шаг 3. Импорт компонента

Теперь нам нужно импортировать компонент формы DemoForm.js в главный файл index.js. Отмечу, что в моем примере используется интеграция с Bootstrap. Подробнее о подключении Bootstrap к приложению ReactJS рассказывается в этой статье. С учетом интеграции исходный код src/index.js выглядит следующим образом:

import React from 'react';

import ReactDOM from 'react-dom';

import * as serviceWorker from './serviceWorker';

import 'bootstrap/dist/css/bootstrap.min.css';

  

import DemoForm from './DemoForm';

  

ReactDOM.render(

  <React.StrictMode>

    <div className="container">

       <DemoForm />

    </div>

  </React.StrictMode>,

  document.getElementById('root')

);

  

serviceWorker.unregister();

Все готово к запуску приложения. Для его осуществления используйте следующую команду: