JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" name="nome" placeholder="eu devia ser PH" />
<input type="number" name="idade" placeholder="eu devia ser >20" />
<input type="text" name="texto" class="invalido" placeholder="Caso: PH e >20" />
<input type="text" name="maisInfo" placeholder="eu posso ser sim ou não" />
<input type="text" name="data" class="invalido" placeholder="caso: sim" />
<input type="text" name="razao" class="invalido" placeholder="caso: não" />

CSS

.invalido {
    display: none;
}

JavaScript

var regras = {
    texto: {
        nome: 'PH',
        idade: function (shouldbe) {
            var number = parseInt(shouldbe, 10);
            return number > 20;
        }
    },
    data: {
        maisInfo: 'sim'
    },
    razao: {
        maisInfo: 'não'
    }
};

var inputs = document.querySelectorAll('input');
for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener('keyup', verificador);
    inputs[i].addEventListener('change', verificador);
}

function verificador() {
    var prop = this.name;
    if (!prop) return;
    Object.keys(regras).forEach(function (regra) {
        var regrasLocais = Object.keys(regras[regra]);
        var target = document.querySelector('[name="' + regra + '"');
        var valores = regrasLocais.map(function (nome) {
            return document.querySelector('[name="' + nome + '"').value;
        });
        var valida = valores.filter(function (value, i) {
            var original = regras[regra][regrasLocais[i]];
            if (typeof original == 'string') return value == original;
            return original(value);
        });
        if (valida.length == regrasLocais.length) target.classList.remove('invalido');
        else target.classList.add('invalido');
    });
}