反应版本的 ngForm

Question

我最近一直在玩 React 并且真的很喜欢它，但是我遗漏了一些我习惯在其他框架中拥有的东西。 angular、angular 的 ngForm 中主要的一个使用它来提供非常简单的表单验证。检查表单是否有效就像 vm.myForm.$valid 一样简单。

在 React 中，我发现自己写了大量的样板文件来基本上复制我在 ngForm 中的内容。我想知道是否有用于表单验证的 go to 插件，如果没有，社区是否有首选的验证方式？

Answer 1

强烈推荐formsy-react，使用这个库，您可以轻松自定义所有验证和错误消息。

那么你的代码就是，

 import Formsy from 'formsy-react';

  const MyAppForm = React.createClass({
    getInitialState() {
      return {
        canSubmit: false
      }
    },
    enableButton() {
      this.setState({
        canSubmit: true
      });
    },
    disableButton() {
      this.setState({
        canSubmit: false
      });
    },
    submit(model) {
      someDep.saveEmail(model.email);
    },
    render() {
      return (
        <Formsy.Form onValidSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton}>
          <MyOwnInput name="email" validations="isEmail" validationError="This is not a valid email" required/>
          <button type="submit" disabled={!this.state.canSubmit}>Submit</button>
        </Formsy.Form>
      );
    }
  });

这里是some examples and API documents.

反应版本的 ngForm

Reacts version of ngForm

javascript

validation

reactjs

angularjs-ng-form