反應：輸入驗證

我最近開始使用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

反應：輸入驗證

回答

相關問題