Question

是否有任何简单的表单验证插件可用于反应js？使用react js进行表单验证的最简单方法是什么？请回答我

由于我是reactjs的新手，我无法找到表单验证技术。

Answer 1

Formsy React是一个很棒的小插件，可以帮助您进行表单验证。这些例子也很清楚。

Answer 2

我使用Validate.JS进行ReactJS验证。我认为它非常简单而且整洁！

Answer 3

我创建的这个library负责处理与验证字段相关的所有事情......

要验证您的字段，您只需要将字段组件包装好即可完成...省去了手动管理状态的大量工作。

@Override
public void onBackPressed() {
    if (interstitial.isLoaded()) {
        interstitial.show();
    }
    super.onBackPressed();
}

Answer 4

我知道它不是直接在React中操作dom的好方法，但你甚至可以使用完美运行的jquery验证。使用构建在提交处理程序中并传递在React中创建的函数来处理提交。

注意：由于我没有真正使用jquery操作DOM，我没有遇到过这个插件的任何问题

Answer 5

我已经写过一个灵活的validation library，你可以使用它而不做出反应

Answer 6

有许多解决方案。组件库，如ReactBootstrap（https://react-bootstrap.github.io/components/forms/），AntDesign（https://ant.design/components/form/），提供现成的组件来构建UI。它们包括具有状态控制的表单组件，但依赖于集合的其他组件。其他像Calidation（https://github.com/selbekk/calidation）公开包装器组件来访问覆盖范围内的表单状态控件。换句话说，您只需在表单/输入验证状态下使用包装器和增益控制来包装您的任意（例如现有）表单内容。有了专业人员，您可以设置验证规则

我个人更喜欢这种方法，但是连接到标准化的HTML5约束验证API。用户代理aka浏览器无论如何都会进行验证，并且正确且成熟。为什么不依靠呢？所以解决方案是https://github.com/dsheiko/react-html5-form 您可以使用Form组件定义表单范围，并使用InputGroup 1指定验证输入。它，你在每个范围内得到它的有效状态和错误信息。

Answer 7

我已经编写了一个非常简单的React库来处理表单验证：https://github.com/tkrotoff/react-form-with-constraints

主要优点：

支持HTML5输入属性（required，type="email"，maxlength ...）
体积小巧：易于适应regular React code
异步支持
对React Native的支持
现成的Bootstrap 4和Material UI样式

此处的示例：https://github.com/tkrotoff/react-form-with-constraints/blob/master/README.md#examples

Answer 8

在React中没有验证数据/表单的任何标准方法，因为React与验证无关，而是使DOM（文档对象模型）与下面的数据（javascript中的数据）保持同步。您可能会寻找专门设计用于“表单验证”的任何专用库，但是由于我们已经有独立于DOM的数据，因此可能的问题应该是“如何在javascript中验证任何数据结构？”。

我认为，验证任何数据结构的最佳解决方案是基于 JSR303 Bean Validation specification的工具。但是由于找不到该规范的任何javascript实现，因此我受own library的启发实现了Symfony 2 Validator Component。这是在React：link中使用此库验证表单的真实示例。

代码如下：

import React, { Component } from "react";
import ReactDOM from "react-dom";

import validator, {
  Collection,
  All,
  Required,
  Optional,
  NotBlank,
  Length,
  Email
} from "@stopsopa/validator";

class App extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      data: {
        name: "",
        email: "",
        comments: []
      },
      errors: {},
      validate: false
    };
  }
  onSubmit = async e => {
    e.preventDefault();

    const errors = await validator(
      this.state.data,
      new Collection({
        name: new Required([new NotBlank(), new Length({ min: 3 })]),
        email: new Required([new NotBlank(), new Email()]),
        comments: new All([new NotBlank(), new Length({ min: 10 })])
      })
    );
    this.setState({
      errors: errors.getTree(),
      validate: true
    });

    if (!errors.count()) {
      console.log("send data to server", this.state.data);
    }
  };
  onChange = (name, value) => {
    console.log(name, value);
    this.setState(state => ({
      ...state,
      data: { ...state.data, ...{ [name]: value } }
    }));
  };
  addComment = () =>
    this.setState(state => {
      const comments = state.data.comments;
      comments.push("");
      const newState = { ...state };
      newState.data.comments = comments;
      return newState;
    });
  deleteComment = i =>
    this.setState(state => {
      const newState = { ...state };
      state.data.comments.splice(i, 1);
      return newState;
    });
  editComment = (i, value) => {
    this.setState(state => {
      const newState = { ...state };
      state.data.comments[i] = value;
      return newState;
    });
  };
  render() {
    const s = this.state;
    console.log("state", JSON.stringify(s, null, 4));
    return (
      <form onSubmit={this.onSubmit}>
        <label>
          name:
          <input
            value={s.data.name}
            onChange={e => this.onChange("name", e.target.value)}
          />
        </label>
        {s.validate && s.errors.name && (
          <div className="error">{s.errors.name}</div>
        )}
        <br />
        <label>
          email:
          <input
            value={s.data.email}
            onChange={e => this.onChange("email", e.target.value)}
          />
        </label>
        {s.validate && s.errors.email && (
          <div className="error">{s.errors.email}</div>
        )}
        <div>
          comments:{" "}
          <a onClick={this.addComment} href="javascript:void(0)">
            add
          </a>
          {s.data.comments.map((m, i) => (
            <div style={{ border: "1px solid red" }} key={i}>
              <textarea
                rows="2"
                value={m}
                onChange={e => this.editComment(i, e.target.value)}
              />
              <a
                onClick={() => this.deleteComment(i)}
                href="javascript:void(0)"
              >
                delete
              </a>
              {s.validate && s.errors.comments && s.errors.comments[i] && (
                <div className="error">{s.errors.comments[i]}</div>
              )}
            </div>
          ))}
        </div>
        <br />
        <input type="submit" value="submit" />
      </form>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

此代码中最好的事实是，如果您在后端使用node.js，则有可能（如果在体系结构级别正确完成）在前端和后端使用相同的验证器。我发现这样做非常方便，不必为前端和后端重复验证器，并且可以确保我在任何地方都以完全相同的方式验证数据。

将JSR303与React一起使用实际上非常简单，清晰并且功能强大，因为使用哪种类型的组件来构建表单并不重要（因为您不是在验证表单，而是在验证下面的数据）。您可以验证任何数据结构（平面字段，字段/值列表，表格形式等等），并且JSR303为您提供对所有验证过程的非常细致和声明式的控制，但您不仅限于可以创建的预定义验证器您自己的验证器，用于任何非标准案例。另外，该库默认情况下是异步的，这意味着您甚至可以实现验证器，如果需要的话（例如ReCaptcha或您必须检查用户名在DB中是否唯一），您甚至可以实现将特定的验证委派给ajax / fetch之后的外部服务的验证器。 / p>

Answer 9

我过去曾经使用过redux-form和formik，最近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="firstname" ref={register} /> {/* register an input */}

      <input name="lastname" ref={register({ required: true })} /> {/* apply required validation */}
      {errors.lastname && 'Last name is required.'} {/* error message */}

      <input name="age" ref={register({ pattern: /\d+/ })} /> {/* apply a Refex validation */}
      {errors.age && 'Please enter number for age.'} {/* error message */}

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

React js表单验证

9 个答案: