reg_validate v0.2.5

Módulo / reg_validate.

Este módulo será utilizado para validação de campos.

• CPF/CNPJ.
• Campo numérico.
• Campos obrigatórios.
• Telefone/Celular.
• Select obrigatório.

Install

$ npm i reg_validate

Import

$ import { Input, InputCont, InputNumb, InputSelect, InputReg, Button }  from 'reg_validate'

Exemplo da <Tag> Button.

<Button color="primary" form={this._formValidate}  value="Confirmar"/>  

Exemplo do Método _formValidate utilizado na <tag> Button .

  _formValidate (e)  { 
    // Condição para verificar sé todos os campos obrigatórios foram preenchidos corretamente.  
    if (e === true){ 
       // Se a condição for verdadeira, significa que todos os campos foram preenchidos corretamente.      
    } 
  }

Propriedades do Button.

Acesse Reactstrap para obter mais informações sobre o color.

Exemplo da <Tag> Input.

<Input name="ex" req={true} type="text" updateValue={ this._updateValue } value={ this.state.ex }/>

Exemplo do Método utilizado na <tag> Input _updateValue

  _updateValue (nameCamp, value)  { 
    // Neste método você pode utilizar ele de duas formas. 
    // 1ª
    let obj = Object.assign({}, this.state)
    obj[nameCamp] = value; 
    this.setState({state: obj})
    //2ª
    this.setState({state: {...state,[nameCamp]: value }})
  }

Obs: O parâmetro nameCamp ele é o name do campo no qual o usuário digita. Ex:

    <Input name="nameCamp"  />
    <Input name="Example"   />

Obs: O parâmetro value ele valor digitado e capturado.
Ex:

    <Input value={ this.state.example }  />

Propriedades do Input.

obs:

• propriedade req como default é 'false'.
• propriedade type como default é 'text'.

Exemplo da <Tag> InputNumb.

<InputNumb name="ex" max="9" min="0" req={ true } updateValue={this.funct} value={ var }/>

Propriedades do InputNumb.

Exemplo da <Tag> InputCont ("Utilizado para validar contato.").

<InputCont name="fone" tpContato="cel" value={ var } updateValue={this._updateValue}/>

Propriedades do InputCont.

Exemplo da <Tag> InputReg ("Utilizado para validar Registros CPF ou CNPJ.").

<InputCont name="fone" tpContato="cel" value={ var } updateValue={this._updateValue}/>

Propriedades do InputCont.

Exemplo da <Tag> InputSelect Fixo.

<InputSelect 
    name="Teste"   
    updateChange={ this._selectOnChange }
    req={ false }
    value={{ label: this.state.label,  value: this.state.objID }}
    options={[
        {label: "ola" ,name:"Teste", value:"01" },
        {label: "alô" ,name:"Teste", value:"02" },
        {label: "odin",name:"Teste", value:"03" },
    ]}
/>

Exemplo da <Tag> InputSelect Dinâmico.

<InputSelect 
    updateChange={ this._selectOnChange }
    req={ true }
    value={{ label: this.state.faixaTeor.estagioCultura,  value: this.state.faixaTeor.IDEstagioCultura }}
    options={
        this.state.estagioCultura.map(result  => (
            {label: result.descricao, name: 'IDEstagioCultura', value: result.objID}
        ))
    }
/>

Propriedades do InputSelect.

Modelo de validação.

Ex: Utilizando Input.

import { Button, Input } from 'reg_validate'; 
import { Col, Label, Row }          from 'reactstrap';
import React, { Component }         from 'react'; 

class Cadastro extends Component {
    constructor(props){
        super(props); 
        this.state={
            cliente : { 
                nome       : '', 
                sobrenome  : ''
            }
        }
         this._formValidate = this._formValidate.bind(this); 
        this._updateValue = this._updateValue.bind(this); 
   }
   _formValidate (e)  { 
        // Sé a condição for verdadeira, significa que todos os campos foram preenchidos corretamente. 
        if (e === true){
            // Function Register()
            // Caso queira salvar no banco de dados. 
        }
    }
    _updateValue (nameCamp, value) {
        let obj = Object.assign({}, this.state.objeto); 
        obj[nameCamp] = value ; 
        this.setState({objeto: obj})
    }
 
    render() {
        return (
            <div>
                <Row>
                    <Col lg="4">
                        <Label>Nome : </Label>
                        <Input 
                            name="nome" 
                            req={ true }
                            type="text" 
                            updateValue={ this._updateValue } 
                            value={ this.state.cliente.nome } 
                        />
                    </Col>
                    <Col lg="4">
                        <Label>Sobrenome : </Label>
                        <Input 
                            name="nome" 
                            type="text" 
                            updateValue={ this._updateValue } 
                            value={ this.state.sobrenome.nome } 
                        />
                    </Col>  
                    <div className="float-right">
                    <Row>
                        <Col>
                            <Button color="primary" form={this._formValidate}  value="Confirmar"/>
                        </Col>
                        <Col>
                            <button className="btn btn-danger" type="button"> Cancelar </button>
                        </Col>
                    </Row>
                </Row>
            </div>
        );
    }
}

Ex: Utilizando Input, InputCont e InputReg

import { Button, Input, InputNumb, InputReg } from 'reg_validate'; 
import { Col, Label, Row }          from 'reactstrap';
import React, { Component }         from 'react'; 

class Cadastro extends Component {
    constructor(props){
        super(props); 
        this.state={
            cliente : { 
                nome       : '', 
                cpf        : '', 
                telefone   : '',
                celular    : ''
            }
        }
         this._formValidate = this._formValidate.bind(this); 
        this._updateValue = this._updateValue.bind(this); 
   }
   _formValidate (e)  { 
        // Sé a condição for verdadeira, significa que todos os campos foram preenchidos corretamente. 
        if (e === true){
            // Function Register()
            // Caso queira salvar no banco de dados. 
        }
    }
    _updateValue (nameCamp, value) {
        let obj = Object.assign({}, this.state.cliente); 
        obj[nameCamp] = value ; 
        this.setState({cliente: obj})
    }
 
    render() {
        return (
            <div>
                <Row>
                    <Col lg="4">
                        <Label>Nome : </Label>
                        <Input 
                            name="nome" 
                            req={ true }
                            type="text" 
                            updateValue={ this._updateValue } 
                            value={ this.state.cliente.nome } 
                        />
                    </Col>
                    <Col lg="4">
                        <Label>Telefone : </Label>
                        <InputCont 
                            name="telefone" 
                            req={true}
                            tpContato="tel" 
                            value={ this.state.cliente.telefone } 
                            updateValue={this._updateValue}
                        />
                    </Col>
                    <Col lg="4">
                        <Label>Celular : </Label>
                        <InputCont 
                            name="celular" 
                            tpContato="cel" 
                            value={ this.state.cliente.celular } 
                            updateValue={this._updateValue}
                        />
                    </Col>  
                    <div className="float-right">
                </Row>
                <Row>
                    <Col lg="12">
                        <Label>CPF : </Label>
                        <InputReg 
                            name="cpf" 
                            registro="CPF" 
                            value={this.state.cliente.cpf} 
                            updateValue={this._updateValue}
                        />
                    </Col> 
                </Row>
                <Row>
                    <Col>
                        <Button color="primary" form={this._formValidate}  value="Confirmar"/>
                    </Col>
                    <Col>
                        <button className="btn btn-danger" type="button"> Cancelar </button>
                    </Col>
                </Row>
            </div>
        );
    }
}

Ex: Utilizando Input, InputCont e InputReg

import { Button, Input, InputNumb, InputReg } from 'reg_validate'; 
import { Col, Label, Row }          from 'reactstrap';
import React, { Component }         from 'react'; 

class Cadastro extends Component {
    constructor(props){
        super(props); 
        this.state={
            cadastro : { 
                idNome  : '', 
                nome    : '', 
            }
        }
         this._formValidate = this._formValidate.bind(this); 
        this._updateValue = this._updateValue.bind(this); 
    }
    _formValidate (e)  { 
        // Sé a condição for verdadeira, significa que todos os campos foram preenchidos corretamente. 
        if (e === true){
            // Function Register()
            // Caso queira salvar no banco de dados. 
        }
    }
    _selectOnChange = (e) => { 
        this.setState({cadastro: {...this.state.cadastro,[e.name]: e.value}})
    }
    render() {
        return (
            <div>
                <Row>
                    <Col lg="4">
                        <Label>Nutriente : </Label>
                        <InputSelect 
                            updateChange={ this._selectOnChange }
                            req={ true }
                            value={{ label: this.state.cadastro.nome,  value: this.state.cadastro.idNome }}
                            options={[
                                {label: "Michel", name:"cadastro", value: "01" },
                                {label: "James",  name:"cadastro", value: "02" },
                                {label: "José" ,  name:"cadastro", value: "03" },
                            ]}
                        />
                    </Col>  
                    <div className="float-right">
                </Row>
                <hr/>
                <div className="float-right">
                    <Row>
                        <Col>
                            <Button color="primary" form={ this._formValidate }  value="Confirmar"/>
                        </Col>
                        <Col>
                            <button className="btn btn-danger" type="button" onClick={() => {this.props.onExit()}} > Cancelar </button>
                        </Col>
                    </Row>
                </div>
            </div>
        );
    }
}