如何在 React 中实现表单验证？

Question

我为我的 React-App 项目创建了一个 FormValidation 函数。我使用教程"Form Validation in React" 来实现这一点。您可以在Github 上找到一个演示项目。问题是，这个 FormValidation 在我的项目中不起作用。我不知道为什么。

我知道帮助我需要时间，但我会非常感激，因为我对此知之甚少。由于文件太大，无法在此处插入，我创建了 SandBox.io 项目。这与我自己使用的项目完全相同：

感谢我们的帮助。对于我的 React-App，我使用的是 Evergreen UI 框架。您可以找到 TextInputFields 的 Props（我使用的）here。

Answer 1

编辑：正如 @bill 所建议的，我个人使用过 react-hook-form，我认为它在开发人员体验和简单性方面都很棒。我会推荐使用它。

您可以为表单验证编写一个单独的模块。

验证模块

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 是您是否要显示错误，而 value 是相应的错误消息。

例如：如果我的电子邮件无效，它将返回{ status: true, value: 'Email is invalid' }

现在在我的 react 组件中，我可以简单地导入这些验证器并使用它。

表单组件

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 两件事。现在我也可以在我的其他应用程序中使用我的表单验证。

Answer 2

如果你的项目已经升级到最新的 React with 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

我建议使用库。表单创建和验证往往相当痛苦。一般来说，使用 lib 会让生活更轻松：

例如

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

以及不同的比较：

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