Пример валидации форм в 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;
Шаг 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