Как я могу реализовать FormValidation в React?

Question

Я создал функцию FormValidation для своего проекта React-App.Я использую учебник «Проверка формы в React» , чтобы реализовать это.Вы можете найти демонстрационный проект на Github .Проблема в том, что это FormValidation не работает в моем проекте.Я не знаю почему.

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

Спасибо за нашу помощь.Для своего React-приложения я использую Evergreen UI Framework.Вы можете найти реквизиты для TextInputFields (которые я использую) здесь .

Answer 1

Я рекомендую использовать библиотеки.Создание и проверка форм, как правило, довольно болезненно.Использование lib делает жизнь проще в целом:

ex.

https://react -form.js.org / # /

И сравнение различныхединицы:

https://codebrahma.com/form-libraries-in-react/

Answer 2

Если ваш проект обновлен до последней версии React с Hook, то вы можете попробовать мой пакет ниже:

Github: https://github.com/bluebill1049/react-hook-form

Веб-сайт: http://react -hook-form.now.sh

пример ниже:

import React from 'react'
import useForm from 'react-hook-form'

function App() {
  const { register, handleSubmit, errors } = useForm() // initialise the hook
  const onSubmit = (data) => { console.log(data) } // callback when validation pass

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="password" ref={register({ required: true })} /> 

      <input name="lastname" ref={register({ required: true })} /> 

      <input type="submit" />
    </form>
  )
}

Answer 3

Вы можете написать отдельный модуль для проверки формы.

Модуль проверки

import { emailRegex } from './regex'

export function validateEmail(email) {
  if (!email.length) {
    return {
      status: true,
      value: 'Email is required'
    }
  } else if (!emailRegex.test(email)) {
    return {
      status: true,
      value: 'Email is invalid'
    }
  }
  return {
    status: false,
    value: ''
  }
}

export function validatePhone(phone) {
  if (!phone.length) {
    return {
      status: true,
      value: 'Mobile number is required'
    }
  } else if (isNaN(phone) || phone.length !== 10) {
    return {
      status: true,
      value: 'Mobile number is invalid'
    }
  }

  return {
    status: false,
    value: ''
  }
}

Этот модуль всегда будет возвращать объект подписи { status, value }.Где статус - хотите ли вы показать ошибку или нет, а значение - соответствующее сообщение об ошибке.

Например: если мой адрес электронной почты недействителен, он вернет { status: true, value: 'Email is invalid' }

Теперь в моей реакциикомпонент Я могу просто импортировать эти валидаторы и использовать его.

Компонент формы

import { validateEmail, validatePhone } from './../validators'

class Form extends React.Component {
  constructor() {
      this.state = {
        phoneErr: {
          status: false,
          value: ''
        },
        emailErr: {
          status: false,
          value: ''
        }
    }
  }
  handleSubmit() {
    if(this.checkFormStatus()) {
      // submit form
    }
  }
  checkFormStatus() {
      // form validation middleware
      const { email, phone } = this.state
      const emailErr = validateEmail(email)
      const phoneErr = validatePhone(phone)

      if (!emailErr.status && !phoneErr.status) {
        return true
      } else {
        this.setState({
          emailErr,
          phoneErr
        })
        return false
      }
    }

    render() {
      return (
        <div>
          <div className="form-group">
             <label>Member Phone Number</label>
             <input
                onChange={this.handleChange}
                value={this.state.phone}
                name="phone"
                type="text"
                maxLength={10}
              />
                { phoneErr.status && <p className="form-group__error">{ phoneErr.value }</p>}
        </div>

        <div className="form-group">
          <label>Email Address</label>
          <input
            onChange={this.handleChange}
            value={this.state.email}
            name="email"
            type="text"
          />
         { emailErr.status && <p className="form-group__error">{ emailErr.value }</p>}
      </div>

      <Button onClick={this.handleSubmit} primary>Add member</Button>

        </div>
      )
    }
}

Я выделил функцию checkFormStatus в качестве промежуточного ПО для валидации.Идея здесь состоит в том, чтобы отделить часть проверки от моего компонента реакции.Таким образом, я отделил логику проверки формы.Мне просто нужны две вещи status и message.Теперь я могу использовать проверку формы и в других моих приложениях.