Iremos ver como usar essa ótima lib de validações para uma das tarefas mais comuns do nosso cotidiano.
Uma das tarefas mais comuns em qualquer sistema é a parte da criação de contas para ter acesso aos mesmos, e uma prática bastante comum pra evitar que os usuários tenham a certeza de que estão realmente utilizando a senha que eles desejam é adicionando uma confirmação de senha.
No artigo abaixo, já vimos as vantagens de usar o Yup e como ele pode facilitar ainda mais a nossa vida.
Agora vamos dar um passo a mais, e vamos fazer uma validação um pouco mais elaborada. Ao pensar em um formulário com os campos email, password e passwordConfirmation, podemos pensar primeiramente no seguinte schema:
import * as Yup from 'yup';
validationSchema: Yup.object({
email: Yup.string().required('Email is required'),
password: Yup.string().required('Password is required'),
passwordConfirmation: Yup.string().required('Password confirmation is required'),
}); Até então parece estar certo, pois todos esses campos são de fato obrigatórios, porém precisamos garantir que o que o usuário irá digitar no campo de password deve ser o mesmo digitado no passwordConfirmation.
Para isso usaremos dois recursos do Yup, o oneOf()e o ref() . O oneOf()faz com que a validação siga pelo menos um tipo específico a ser definido em uma lista que é passada como parâmetro, já o ref() retorna a referência de um item quando passado o nome do mesmo.
A solução para esse caso seria algo como o exemplo abaixo:
import * as Yup from 'yup';
validationSchema: Yup.object({
email: Yup.string().required('Email is required'),
password: Yup.string().required('Password is required'),
passwordConfirmation:
Yup.string()
.required('Password confirmation is required')
.oneOf([Yup.ref('password')], 'Passwords must match'),
});Com isso conseguimos aplicar uma validação que supra todos os requisitos dessa tarefa.
Viu como foi fácil?
Abaixo vou deixar outros exemplos usando o yup pra aprofundar ainda mais os conhecimentos.
Bons estudos e muito sucesso!!!
