Livr.jsを使用したReactコンポーネントの検証

数年前、私はHIVRに関するLIVRに関する記事を見ました。それ以来、すべてのプロジェクトでこのライブラリを使用しています。 Reactへの移行に伴い、それを検証するように変更しました。 既存のソリューションは、私が望んだ柔軟性を提供しませんでした。 私はすでに2つのプロジェクトでソリューションを使用しており、npmに配置することにしました-他の誰かにとっては便利かもしれません。

パッケージはreact-livr-validationと呼ばれます。



基本的な使用例：

import React from 'react'; import Validation, {DisabledOnErrors, ValidationInput} from 'react-livr-validation'; const schema = { login: ['required', 'not_empty'], password: ['required', 'not_empty'] }; const data = { login: '', password: '' }; export default function() { return ( <Validation data={data} schema={schema} > <form> <ValidationInput name="login" > <input name="login" /> </ValidationInput> <ValidationInput name="password" > <input name="password" type="password" /> </ValidationInput> <DisabledOnErrors> <input type="submit" /> </DisabledOnErrors> </form> </Validation> ); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンポーネントは検証スキームと初期データを受け入れます（データが有効でない場合、送信ボタンはすぐに非アクティブになります）。カスタムルールとエイリアスルールを渡すこともできます。

 const customRules = { alpha_chars: function() { return function(value) { if (typeof value === 'string') { if (!/[az,AZ]+/.test(value)) { return 'WRONG_FORMAT'; } } }; } }; const aliasedRules = [ { name: 'strong_password', rules: { min_length: 6 }, error: 'TOO_SHORT' } ]; <Validation data={data} schema={schema} rules={customRules} aliasedRules={aliasedRules} > // ... form </Validation>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ValidationInputラッパーは、検証のためにイベントハンドラーを検証に追加します。 デフォルトでは、これらは変更、ぼかし、キーアップイベントです。

 <ValidationInput name="password" valicateOnEvents={['change', 'blur', 'keyUp']} > <input name="password" type="password" /> </ValidationInput>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ラッパーを実装する機会があります-APIをpropにスローするHOCエクスポートパッケージ

 // @flow import React, {Component} from 'react' import {ValidationComponent} from 'react-livr-validation' import get from 'lodash/get' import noop from 'lodash/noop' import compose from 'ramda/src/compose' import styled from 'styled-components' type DataChunk = { name: string, value: any } type State = { touched: boolean } type Props = { // will be passed by HOC setData: (data: DataChunk) => void, getError: (name: string) => ?string, getErrors: () => Object, className: string, // for the error block style: Object // for the error block errorCodes: Object, name: string, field: string } class NestedError extends Component { props: Props; isTouched() { const {children} = this.props; return get(children, 'props.value') } state: State = { touched: this.isTouched() } setTouched() { this.setState({ touched: true }) } cloneElement() { const {children} = this.props; const onBlur = get(children, 'props.onBlur', noop); return React.cloneElement( children, { onBlur: compose(this.setTouched, onBlur) } ) } render() { const {touched} = this.state; const { children, field, name, getError, errorCodes, style, className } = this.props; const errors = getErrors(); const error = get(errors, `${field}`.${name}); return ( <div> {touched ? children : this.cloneElement()} {error && <Error className={className} style={style} > {errorCodes[error] || error} </Error> } </div> ); } } const Error = styled.div` color: red; `; export default ValidationComponent(NestedError)