react-js-validator

1.0.12 • Public • Published

React-js-validator

Component providing simple input validation for react js. use can use validation function directly or custom input for vaildation.

Use Method Directly or Use custom Input listed below

validation Methods:

  • Email
  • Numeric
  • Letter
  • AlphaNumeric
  • CustomRx

custom Input Components:

  • EmailInput
  • LetterInput
  • AlphaNumericInput

## Installing Just simple command npm install command with package name

npm install react-js-validator

## Example for Use Method

iimport React, { Component } from 'react';
import Container from '../Containers/Container';
import { Email,Numeric,Letter,AlphaNumeric,CustomRx,Required } from 'react-js-validator'
class HomeComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      email: null,
    }; 
  }

  validate() {
    let result = Email(this.state.email);
    console.warn("result", result)
  }
  render() {
    return (
      <div>
        <EmailInput max={10} min={3} />
        <input onBlur={() => this.validate()} onChange={(e) => { this.setState({ email: e.target.value }) }} />
      </div>

    );
  }
}


export default HomeComponent;

Package Functions

Email

params Required Type Default value Description
any String Yes string it will check email valdation and return object with 2 key. 1st msg and 2nd for status. status wil be false if valdation failed.

Numeric

params Required Type Default value Description
any Number Yes Number it will check Numaric valdation and return object with 2 key. 1st msg and 2nd for status. status wil be false if valdation failed.it must be always 1st param
min lenght optional Number it will check minimum length of the number. It must be 2nd parameter.if validation false retruned status will be false. after that if you need only max length than put it null
max lenght optional Number it will check maximum length of the number. It must be 3nd parameter.if validation false returned status will be false.if you need only max length than put 2nd params null for no minimum length

Letter

params Required Type Default value Description
any string Yes String it will check Letter valdation and return object with 2 key. 1st msg and 2nd for status. status wil be false if valdation failed. and it must be always 1st param.
min lenght optional Number it will check minimum length of the Letter. It must be 2nd parameter.if validation false retruned status will be false. after that if you need only max length than put it null
max lenght optional Number it will check maximum length of the Letter. It must be 3nd parameter.if validation false returned status will be false.if you need only max length than put 2nd params null for no minimum length

AlphaNumeric

params Required Type Default value Description
any string or number Yes String Number
min lenght optional Number it will check minimum length of the AlphaNumeric. It must be 2nd parameter.if validation false retruned status will be false. after that if you need only max length than put it null
max lenght optional Number it will check maximum length of the AlphaNumeric. It must be 3nd parameter.if validation false returned status will be false.if you need only max length than put 2nd params null for no minimum length

CustomRx

params Required Type Default value Description
any string or number Yes String Number
special character optional bool it will check special character in the given value. It must be 2nd parameter.if validation false retruned status will be false.After special character if you need more params than put it null
capital character optional bool it will check capital character in the given Value. It must be 3nd parameter.if validation false returned status will be false.if you need only capital character params than put 2nd params null for no special length
min lenght optional Number it will check minimum length of the AlphaNumeric. It must be 4th parameter.if validation false retruned status will be false. after that if you need only max length than 2nd and 3rd params null
max lenght optional Number it will check maximum length of the AlphaNumeric. It must be 5th parameter.if validation false returned status will be false.if you need only max length than put 2nd,3rd and 4th params null

Example for Custom Input Use

import React, { Component } from 'react';
import Container from '../Containers/Container';
import { EmailInput, LetterInput, AlphaNumericInput } from 'react-js-validator'
class HomeComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      email: null,
    };
  }
  handleCallback(data) {
    console.warn("status", data)
  }
  render() {
    
    return (
      <div>

        HomeComponent..
        <LetterInput max={10} min={3} return={this.handleCallback.bind(this)} />
       
      </div>

    );
  }
}


export default HomeComponent;

Component props and callback function

LetterInput

Props Required Type Default value Description
max optional int null it will check Input maximum length and return errorStatus true
min optional int null it will check Input minimum length and return errorStatus true
return optional callback function null it will return the callback status and function should be pass here with a parammeter

EmailInput

Props Required Type Default value Description
return optional callback function null it will return the callback status and function should be pass here with a parammeter

AlphaNumericInput

Props Required Type Default value Description
max optional int null it will check Input maximum length and return errorStatus true
min optional int null it will check Input minimum length and return errorStatus true
return optional callback function null it will return the callback status and function should be pass here with a parammeter

Package Sidebar

Install

npm i react-js-validator

Weekly Downloads

8

Version

1.0.12

License

ISC

Unpacked Size

21.8 kB

Total Files

11

Last publish

Collaborators

  • anilsidhu