Как бы вы реализовали бы проверку данных основываясь на существующем коде?

Question

[Flesh Herbal]

Всем привет. Как бы вы реализовали подобный код (пока отбрасывая проверку на кол-во символов и самих символов).
Мне кажется данная проверка гов...

checkInput(){
        var resultData = [this.state.firstName, this.state.lastName, this.state.nickName, this.state.email]; //данные формы регистрации
        var tr = false;
            
        for(var i = 0; i < resultData.length; i++){
            
            console.log(i +  " : " + resultData[i] );
            if(resultData[i] === null){
                console.log("entered the cicle");
                this.setState({checkText: "Не все поля заполнены!"});
                tr = false;
                break;
            }
            else(tr = true)
        }
        if(tr === true){

            if(!this.state.passWord || this.state.checkPass == null){
                this.setState({checkText: "Поля с паролями не заполнены!"});
                console.log("1");
            }
            else if(this.state.passWord !== this.state.checkPass){
                this.setState({checkText: "Введённые пароли не совападают!"});
                console.log("2");
            }  
            else{               
                this.setState((state) => {
                    return {checkText: "Готово"};
                });
                this.sendData();  //отправляет данные на сервер
            }
        }    
    }

Answer 1

[Александр]

Ух. Ну, используйте Formik в связке с Yup.

import React, { useCallback } from 'react';
import { Formik, Form, useField } from 'formik';
import * as yup from 'yup';

const initialValues = {
  firstName: '',
  lastName: '',
  nickName: '',
  email: '',
  password: '',
  confirmPassword: ''
};

const validationSchema = yup.object().shape({
  firstName: yup.string().required('Имя является обязательным'),
  lastName: yup.string().required('Фамилия является обязательной'),
  nickName: yup.string().required('Имя пользователя является обязательным'),
  email: yup
    .string()
    .email('Введенное значение не является почтой')
    .required('Почта является обязательной'),
  password: yup
    .string()
    .min(8, 'Минимальная длина пароля 8 символов')
    .required('Пароль является обязательным'),
  confirmPassword: yup
    .string()
    .oneOf([yup.ref('password'), null], 'Пароли не совпадают')
    .min(8, 'Минимальная длина пароля 8 символов')
    .required('Пароль является обязательным')
});

const ExampleField = ({ name, label, ...props }) => {
  const [field, meta, helpers] = useField(name);

  return (
    <label>
      {label}
      <input
        name={name}
        value={field.value}
        onChange={field.onChange}
        onBlur={field.onBlur}
        {...props}
      />
      {meta.error !== undefined && meta.touched && <div>{meta.error}</div>}
    </label>
  );
};

const ExampleForm = () => {
  const handleSubmit = useCallback((values, helpers) => {
    console.log(values);
    helpers.setSubmitting(false);
  }, []);

  return (
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      validationOnBlur
      onSubmit={handleSubmit}
    >
      {({ values, errors, touched, isValid, isSubmitting }) => (
        <Form>
          <ExampleField label="Имя" name="firstName" />
          <ExampleField label="Фамилия" name="lastName" />
          <ExampleField label="Имя пользователя" name="nickName" />
          <ExampleField label="Почта" type="email" name="email" />
          <ExampleField label="Пароль" type="password" name="password" />
          <ExampleField label="Подтверждение пароля" type="password" name="confirmPassword" />
          <button type="submit" disabled={!isValid || isSubmitting}>
            Отправить
          </button>
          <pre>{JSON.stringify({ values, errors, touched }, null, 2)}</pre>
        </Form>
      )}
    </Formik>
  );
};

Пример.

Answer 2

[Demian Smith]

Библиотеку бы заюзал. Нафиг надо придумывать то, что уже придумано.

Например, такую https://github.com/jquense/yup

Ну или какую-нибудь другую, главное чтоб она была про валидацию данных.