Пример валидации форм в React
В этой статье мы рассмотрим валидацию форм в 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();
Все готово к запуску приложения. Для его осуществления используйте следующую команду:
npm start
Теперь можно открывать проект в браузере по следующей локальной ссылке:
http://localhost:3000
Источник: www.internet-technologies.ru