Валидация форм

Последнее обновление: 01.04.2022

Реализации валидации форм в React.js предусматривает проверку их введенных значений, и если эти значения сооветстуют требованиям, тогда происходит изменение состояния компонента. Так, определим следующую страницу index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Формы в React</title>
</head>
<body>
    <div id="app"></div>
       
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
       
    <script type="text/babel">
    class UserForm extends React.Component {
      constructor(props) {
        super(props);
        var name = props.name;
        var nameIsValid = this.validateName(name);
        var age = props.age;
        var ageIsValid = this.validateAge(age);
        this.state = {name: name, age: age, nameValid: nameIsValid, ageValid: ageIsValid};
  
        this.onNameChange = this.onNameChange.bind(this);
        this.onAgeChange = this.onAgeChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }
        validateAge(age){
            return age>=0;
        }
        validateName(name){
            return name.length>2;
        }
        onAgeChange(e) {
            var val = e.target.value;
            var valid = this.validateAge(val);
            this.setState({age: val, ageValid: valid});
        }
        onNameChange(e) {
            var val = e.target.value;
            console.log(val);
            var valid = this.validateName(val);
            this.setState({name: val, nameValid: valid});
        }
  
        handleSubmit(e) {
            e.preventDefault();
            if(this.state.nameValid ===true && this.state.ageValid===true){
                alert(`Имя: ${this.state.name} Возраст: ${this.state.age}`);
            }
        }
  
        render() {
            // цвет границы для поля для ввода имени
            var nameColor = this.state.nameValid===true?"green":"red";
            // цвет границы для поля для ввода возраста
            var ageColor = this.state.ageValid===true?"green":"red";
            return (
                <form onSubmit={this.handleSubmit}>
                    <p>
                        <label>Имя:</label><br />
                        <input type="text" value={this.state.name} 
                            onChange={this.onNameChange} style={{borderColor:nameColor}} />
                    </p>
                    <p>
                        <label>Возраст:</label><br />
                        <input type="number" value={this.state.age} 
                            onChange={this.onAgeChange}  style={{borderColor:ageColor}} />
                    </p>
                    <input type="submit" value="Отправить" />
                </form>
            );
        }
    }
    ReactDOM.createRoot(
        document.getElementById("app")
    )
    .render(
        <UserForm name="" age="0" />
    );
    </script>
</body>
</html>

Здесь добавлено поле для ввода возраста. Дополнительные значения nameValid и ageValid позволяют установить корректность введенных имени и возраста соответственно. Эти значения понадобятся для стилизации полей. Так, если введенное значение некорректно, то поле ввода будет иметь красную границу, иначе зеленую.

var nameColor = this.state.nameValid===true?"green":"red";
var ageColor = this.state.ageValid===true?"green":"red";

При определении поля ввода каждое поле связывается с определенным значением в state:

<input type="text" value={this.state.name} onChange={this.onNameChange} style={{borderColor:nameColor}} />
<input type="number" value={this.state.age} onChange={this.onAgeChange}  style={{borderColor:ageColor}} />

И для каждого поля ввода определен свой обработчик onChange, в котором происходит валидация и изменение введенного значения:

Формы в React Валидация форм в React

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850