Ir para o conteúdo principal

Criando validação nova para os inputs em Consignação

exemplo: validando input que aceitará apenas letras, espaços e acentos (nome de usuário)

1. No input que receberá a validação Funcionario.vue, adicionar um parâmetro "nome" dentro da propriedade "validacao", que é responsável por tratar e exibir erros à medida que o usuário digita.

<g-input
    ref="refNomFuncionario"
    id="refNomFuncionario"
    name="refNomFuncionario"
    tipo="text"
    etiqueta="Nome"
    :converterParaMaiusculo="true"
    validacao="required | maxlength(100) | nome" // adicionado "nome" na validação
    :tamanho="100"
    :desabilitar="paginaStatus.desabilitarEdicao"
    v-model="funcionario.nomFuncionario"
    mascara="nome"
>
</g-input>

Funcionario.vue

2. Dentro de gInput.vue criar uma variável const nomeValido que ficará responsável por capturar o valor digitado e dentro de `util.js` foi criado um método validarNome(nome) que executará a lógica de validação

...
const cnsValido = (value) => (value === '' || util.validarCNS(value) === true)
const mesAnoValido = (value) => (value === '' || util.validarMesAno(value) === true)
const nomeValido = (value) => (value === '' || util.validarNome(value) === true) // variável nova

gInput.vue

validarNome (nome) { // validação para nomes de usuário com acento
    const regex = /^[ a-zA-ZÀ-ÿ\u00f1\u00d1]*$/g
    const combina = regex.test(nome)
    return combina
},

util.js


3. Adicionar uma verificação em validations(), que verificará se a propriedade possui o parâmetro "nome"

validations () {
var dValue = {}
// AS REGRAS DE VALIDAÇÃO SÃO SEPARADAS POR '|'
var validacoes = this.validacao.split('|')
// AGREGAR A VALIDAÇÃO DE ACORDO COM O QUE É INFORMADO PELO USUÁRIO
validacoes.forEach(v => {
  v = v.replace(' ', '')
  ...
  if (v === 'cns') dValue.cns = cnsValido
  if (v === 'anoMes') dValue.anoMes = mesAnoValido
  if (v === 'mesAno') dValue.mesAno = mesAnoValido
  if (v === 'nome') dValue.nome = nomeValido // verificar se g-input possui 'nome' no parametro 'validacoes'
})

gInput.vue


4.  Criar a exibição de erro quando a validação for falsa

validar (evt) {
    
    ...
    
    if (this.$v.dValue.nome === false) { // verifica se o valor informádo é inválido
        this.mensagemErro = 'Nome inválido'
    }
    return !this.$v.dValue.$invalid
gInput.vue