时间戳

首页 > 解决方案 > ReactJS - 前端表单错误处理程序/验证

reactjs - ReactJS - 前端表单错误处理程序/验证

问题描述

我正在用 ReactJS 构建一个简单的捐赠应用程序。这是一个工作版本： https ://stackblitz.com/edit/react-grzdgz

我从来没有做过表单错误验证。因此，如果有人没有填写某个字段，我希望弹出一条错误消息，上面写着“必须填写此字段”之类的内容。

我一直在尝试遵循本教程： https ://learnetto.com/blog/how-to-do-simple-form-validation-in-reactjs

但是我有点迷失了，关于如何将这些功能/错误消息传递到我的表单中，该表单位于一个单独的模块中。在演示中，所有内容都位于一个文件中。

但在我的应用程序中，我的表单与 index.js 分开。所以我在 index.js 中链接到它。

我快到了，我只需要一些帮助来连接一切。

任何人都可以帮助我进行表单错误验证吗？

错误处理功能都在这里： https ://stackblitz.com/edit/react-grzdgz

表单本身位于此处： https ://stackblitz.com/edit/react-grzdgz?file=components%2FForm.js

还有一些表单错误： https ://stackblitz.com/edit/react-grzdgz ?file=components%2FFormErrors.js

任何帮助都会很棒！谢谢！

标签： reactjsformsvalidationerror-handling

解决方案

在提交时，我会有一个名为: 的方法validateFields，它会像你想要的那样验证所有字段（而不是使用默认的 html 验证器，这在某些浏览器上不起作用）。在该方法中，我会保存所有有错误的字段。

如果错误列表（或对象）不为空，则使用 alert 或 popup react-popup

如果没有错误，您可以调用提交方法。

基本上，它看起来像：

export default class DumbComponent extends React.Component {

  state = {} // all your field value

  validateField = () => {
    let error = []
    //Validate all your field

    if (error.length === 0) {
      this.submit()
    } else {
      this.showError() // You decide the way
    }
  }

  render() {
    return (
      <Form>
        <FieldOne />
        <Field2 />

        <SubmitButton onSubmit={this.validateField} />
      </Form>
    )
  }
}

希望它能回答你的问题！

推荐阅读