Question

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

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

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

Answer 1

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

验证模块

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' }

现在在我的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函数用作验证中间件。这里的想法是将验证部分与我的react组件分开。这样，我就将表单验证逻辑解耦了。我只需要两件事status和message。现在，我也可以在其他应用程序中使用表单验证了。

Answer 2

我建议使用库。表单创建和验证往往很痛苦。使用lib通常会使生活更轻松：

例如。

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

和不同的比较：

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

Answer 3

如果您的项目已升级到最新的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>
  )
}

如何在React中实现FormValidation？

3 个答案:

验证模块

表单组件