反应：输入验证

我最近开始使用React，并面临输入验证问题。例如，它只是通过指令在另一个框架中作为Angular.js实现。反应：输入验证

一些经过研究，我发现

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

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

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

感谢，

来源

2015-09-25 Vladyslav Babenko

我在最近阵营某些形式的工作，和我有一个非常类似的经历。我认为这是归结为React是非常新的，表单验证是一个难以解决的难题。这导致了表单验证的狂野西部，没有设定标准，许多新库试图解决这个问题（每个都按照自己的方式进行并做出大量的假设）。

我结束了使用formsy反应的（https://github.com/christianalfoni/formsy-react），这是相当直接的，但做一个大假设 - 我们要验证输入onChange。我想要我的输入呈现错误onBlur，这导致我编写一些辅助函数来创建该行为。

我还没有深入Redux太多，但似乎有一些很好的选择，在该领域（https://www.npmjs.com/package/redux-form），这可能适合您的需求。

让我知道你是否想看到我的Formsy表单验证器/帮手方法的例子。

希望这可以帮助，或者至少提供一些声援，React世界中的验证目前尚不清楚，缺乏标准。

来源

2015-09-30 18:52:25 camerow

我正在使用轻量级解决方案，并且它非常可定制。

在onChange上验证的输入，但可在任何情况下更改。我们可以为textarea创建类似的组件，复选框，收音机

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="[email protected]"/> 
     </div> 
    ); 
    } 
});

这是非常简单和可定制的，对于小项目工作非常好。但是如果我们的项目很大并且有很多不同的形式，那么每次编写带处理程序的应用程序组件都不是最佳选择

来源

2015-10-01 11:51:36

反应：输入验证

回答

相关问题