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
Nenhum comentário