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" />

CSS

.invalido {
    display: none;
}

JavaScript

var regras = {
    texto: {
        nome: 'PH',
        idade: 20
    }
};

var inputs = document.querySelectorAll('input');
for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener('keyup', 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]];
            return value == original;
        });
        if (valida.length == regrasLocais.length) target.classList.remove('invalido');
        else target.classList.add('invalido');
    })
}