反应：输入验证答案

【问题标题】：React: input validation反应：输入验证
【发布时间】：2015-12-23 20:01:09
【问题描述】：

我最近开始使用 React，但遇到了输入验证问题。例如，它只是通过指令在另一个框架中实现为 Angular.js。

经过一番研究，我发现

newforms 库，看起来是目前最好的解决方案。但它很重，不确定当前是否受支持（最近一次更新是 7 个月前）。
另一种方法是将事件从父表单发送到其子输入，并在每个输入上调用验证方法。

但我找不到每个人都试图发明自己的东西的最佳实践，因此你需要自己写东西。

什么是表单验证的最佳解决方案？ React 架构/框架（Flux/Redux）是否提供任何解决方案？

谢谢，

【问题讨论】：

标签： javascript validation reactjs reactjs-flux newforms

【解决方案1】：

我最近在 React 中使用了一些表单，我也有过非常相似的经历。我认为这归结为 React 非常新，表单验证通常是一个难以解决的问题。这导致了表单验证的狂野西部，没有固定的标准，许多新的库试图解决这个问题（每个都以自己的方式做事并做出很多假设）。

我最终使用了相当直截了当的formsy-react (https://github.com/christianalfoni/formsy-react)，但做了一个大假设——我们想要验证输入onChange。我希望我的输入呈现错误onBlur，这导致我编写了一些辅助函数来创建该行为。

我还没有深入研究 Redux，但在那个领域似乎确实有一些不错的选择 (https://www.npmjs.com/package/redux-form)，它们可能会满足您的需求。

如果您想查看我的 Formsy 表单验证器/帮助器方法的示例，请告诉我。

希望这有所帮助，或者至少提供了一些团结，即 React 世界中的表单验证目前尚不清楚并且缺乏标准。

【讨论】：

【解决方案2】：

我使用的是轻量级解决方案，它非常可定制。

在onChange 上验证的输入，但可以在任何地方更改。我们可以为 textarea、checkbox、radio 创建类似的组件

var Input = React.createClass({
  getInitialState: function(){
    // we don't want to validate the input until the user starts typing
    return {
      validationStarted: false
    };
  },
  prepareToValidate: function(){},
  _debounce: function(func, wait, immediate) {
    var timeout;
    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
  },
  componentWillMount: function(){
    var startValidation = function(){
      this.setState({
        validationStarted: true
      })
    }.bind(this);

    // if non-blank value: validate now
    if (this.props.value) {
      startValidation();
    }
    // wait until they start typing, and then stop
    else {
      this.prepareToValidate = _self._debounce(startValidation, 1000);
    }
  },
  handleChange: function(e){
    if (!this.state.validationStarted) {
      this.prepareToValidate();
    }
    this.props.onChange && this.props.onChange(e);
  },
  render: function(){
    var className = "";
    if (this.state.validationStarted) {
      className = (this.props.valid ? 'Valid' : 'Invalid');
    }
    return (
      <input
        {...this.props}
        className={className}
        onChange={this.handleChange} />
    );
  }
});

我们要渲染表单的组件。我们可以根据需要添加任意数量的验证规则

var App = React.createClass({
  getInitialState: function(){
    return {email: ""};
  },
  handleChange: function(e){
    this.setState({
      email: e.target.value
    })
  },
  validate: function(state){
    return {
      email: /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/.test(state.email)
    }
  },
  render: function(){
    var valid = this.validate(this.state);
    return (
      <div>
        <Input valid={valid.email}
               value={this.state.email} 
               onChange={this.handleChange} 
               placeholder="example@example.com"/>
      </div>
    );
  }
});

这是非常简单和可定制的，对于小型项目来说效果很好。但是如果我们的项目很大并且有很多不同的形式，那么每次都用handlers编写App组件并不是最好的选择

【讨论】：