Validação de formulários com React baseada em atributos HTML.
npm install react-form-validation-librequired, type="email", data-*)
addValidationRule
bash
npm install react-form-validator
`
🔧 Uso Básico
`tsx
import React from "react";
import { useFormValidation } from "react-form-validator";
export default function MyForm() {
const { formRef, errors, validate } = useFormValidation();
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (validate()) {
alert("Formulário válido!");
}
};
return (
);
}
`
🌍 Idiomas
Você pode definir o idioma padrão e mensagens customizadas por campo:
`tsx
useFormValidation({
lang: "en",
messages: {
en: {
email: {
required: "Email is required!",
email: "Enter a valid email!",
},
},
pt: {
name: {
onlyLetters: "Somente letras, por favor.",
},
},
},
});
`
🧩 Validações Disponíveis
| Atributo | Descrição |
|-------------------------|------------------------------------|
| required | Campo obrigatório |
| type="email" | Validação de email |
| type="file" + accept| Validação de tipo de arquivo |
| data-validate="rule" | Regras customizadas como onlyLetters |
| data-equals-to="name" | Campo deve ser igual a outro |
| minlength | Tamanho mínimo (minLength no HTML) |
| maxlength | Tamanho máximo (maxLength no HTML) |
| pattern | Expressão regular (pattern no HTML) |
✍️ Adicionando Validações Customizadas
`tsx
import { addValidationRule } from "react-form-validator";
addValidationRule("even", (value) => parseInt(value, 10) % 2 === 0, {
pt: "O número deve ser par.",
en: "The number must be even.",
});
`
🛠️ Mensagens Padrão Customizadas
Você pode sobrescrever mensagens padrão para todos os campos:
`tsx
useFormValidation({
lang: "pt",
defaultMessages: {
pt: {
required: "Preenchimento obrigatório!",
},
},
});
``