rfv

RFV (React Form Validator)

양식 유효성 검사기 및 양식 처리기를 반응합니다.

RFV는 Validator.js를 유효성 검사 엔진으로 사용하고 HTTP 요청에 대한 Axios를 사용합니다.

데모 (양식 유효성 검사기 옵션)

데모 (양식 유효성 검사기 및 양식 처리기 옵션)

설치

원사로 설치하십시오.

$ yarn add rfv

NPM으로 설치하십시오.

$ npm i rfv

용법

양식 유효성 검사기 옵션 만.

 import React from 'react'
import ReactDOM from 'react-dom'

// Import package
import { Form , Input , Textarea } from 'rfv'

// Create validation rules (https://github.com/chriso/validator.js#validators)
const validations = {
  email : [
    {
      rule : 'isEmail' ,
      invalidFeedback : 'Please provide a valid email'
    }
  ] ,
  message : [
    {
      rule : 'isLength' ,
      args : { min : 1 } ,
      invalidFeedback : 'Please provide a message'
    }
  ]
}

const App = ( ) => {
  // Learn the status of validation with `res.isFormValid` and get your form data as an object with `res.items` to make an AJAX request or something else
  const onSubmit = res => {
    if ( res . isFormValid ) {
      post ( 'url' , res . items )
    }
  }

  return (
    // Build your form
    < Form onSubmit = { onSubmit } >
      < div >
        < Input
          type = 'email'
          name = 'email'
          validations = { validations . email }
        / >
      < / div >

      < div >
        < Textarea
          name = 'message'
          validations = { validations . message }
        / >
      < / div >

      < div >
        < button > Submit < / button >
      < / div >
    < / Form >
  )
}

ReactDOM . render ( < App / > , document . getElementById ( 'root' ) )

양식 유효성 검사기 및 양식 처리기 옵션.

 import React from 'react'
import ReactDOM from 'react-dom'

// Import package
import { Form , Input , Textarea } from 'rfv'

// Create validation rules (https://github.com/chriso/validator.js#validators)
const validations = {
  email : [
    {
      rule : 'isEmail' ,
      invalidFeedback : 'Please provide a valid email'
    }
  ] ,
  message : [
    {
      rule : 'isLength' ,
      args : { min : 1 } ,
      invalidFeedback : 'Please provide a message'
    }
  ]
}

const App = ( ) => {
  // After an AJAX call, call the `res.data` to get the backend results
  const postSubmit = res => {
    console . log ( res . data )
  }

  return (
    // Build your form
    < Form
      postSubmit = { postSubmit }
      postOptions = { { method : 'post' , url : 'url' } }
    >
      < div >
        < Input
          type = 'email'
          name = 'email'
          validations = { validations . email }
        / >
      < / div >

      < div >
        < Textarea
          name = 'message'
          validations = { validations . message }
        / >
      < / div >

      < div >
        < button > Submit < / button >
      < / div >
    < / Form >
  )
}

ReactDOM . render ( < App / > , document . getElementById ( 'root' ) )

CSS에 .is-invalid 및 .invalid-feedback 클래스를 추가하십시오.

. is-invalid {
  border : 1 px solid # dc3545 ;
}

. invalid-feedback {
  display : none;
  color : # dc3545 ;
}

. is-invalid ~ . invalid-feedback {
  display : block;
}

백엔드에서 validations 객체에 오류를 추가하십시오.

 app . post ( '/sign-up' , ( req , res ) => {
  const result = {
    validations : { }
  }

  if ( req . body . username === 'john' ) {
    result . validations . username = 'john is already registered'
  }

  res . send ( result )
} ) 

소품 및 콜백

<Form>

소품

 // Since RFV uses Axios for HTTP requests, whatever you pass into postOptions prop except `data: {}`, directly goes into Axios
< Form
  runValidation = { true | false }
  postOptions = { {
    url : 'url' ,
    method : 'post' ,
    headers : {
      'Authorization' : 'Token ...'
    }
  } }
>

콜백

 < Form
  removeItems = { [ 'key1' , 'key2' ] }
  preSubmit = { res => {
    // res.e
    // res.items
    // res.setItems({})
  } }
  onSubmit = { res => {
    // res.e
    // res.items
    // res.isFormValid
    // res.setItems({})
  } }
  postSubmit = { res => {
    // res.e
    // res.data
    // res.error
    // res.items
    // res.isFormValid
    // res.setItems({})
    // res.isPostSubmitFormValid
  } }
>

<Input> , <Select> , <Textarea>

소품

 // You can pass more than one validation
< Input
  validations = { [
    {
      rule : 'isLength' ,
      args : { min : 1 } ,
      invalidFeedback : 'Please provide a username'
    } ,
    {
      rule : 'isLength' ,
      args : { min : 4 , max : 32 } ,
      invalidFeedback : 'Username must be minimum 4, maximum 32 characters'
    }
  ] }
/ >

콜백

 < Input
  onChange = { res => {
    // res.e
    // res.validated
  } }
/ > 

기부금

자유롭게 기여하십시오. 새 문제를 열거 나 풀어 요청을하십시오.

특허

MIT