JSFiddle - React, Tailwind, and code Playground
HTML
<form name="form1" action="#" method="post">
Nome
<input id="nome" type="text" name="nome">
<br/> Email
<input id="email" type="text" name="email">
<br/> Telefone
<input id="telefone" type="text" name="telefone">
<br/>
<input type="submit" value="testar" onclick="return validaForm(this.form)">
</form>
JavaScript
var regras = {
nome: /^([a-zA-Zà-úÀ-Ú0-9]|-|_|\s)+$/,
email: /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i,
telefone: /^[0-9]{1,}$/
}
function validaForm(form) {
var invalidos = Object.keys(regras).map(function(nome) {
var valida = form[nome].value.match(regras[nome]);
if (!valida) form[nome].placeholder = ['Insira o', nome, 'corretamente'].join(' ');
return valida;
});
return invalidos.length == 0;
}