JSFiddle - React, Tailwind, and code Playground

HTML

<form id='form' onsubmit="return validate()" type="GET">
    <input type="text" id="login" />
    <input type="submit" />
</form>

CSS

form.invalid {
    border: 1px solid #f60;
}

JavaScript

function validate() {
    var login = document.getElementById('login');
    if (login.value.length < 4 || !/^[a-z0-9]+[a-z0-9_.-]*$/i.test(login.value)) {
        document.getElementById('form').className = 'invalid';
        return false;
    }
    return true;
}