JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input type="text" id='one' />
</div>
<div>
    <input type="text" id='two' />
</div>
<div>
    <input type="text" id='three' />
</div>

CSS

div {
    margin-bottom: 10px;
}

JavaScript

document.getElementById('one').addEventListener('blur', function() {
    var enteredValue = this.value;
    if(enteredValue == '') return;
    var f = /[а-яa-z0-9]{5}/.test(enteredValue);
    if( !f ) {
        alert('Не менее 5 символов');
        this.focus();
    } else {
        this.value = enteredValue;
    }
});

document.getElementById('two').addEventListener('keyup', function() {
    var enteredValue = this.value;
    if(enteredValue == '') return;
    var replaceValue = enteredValue.replace(/([а-я0-9]+)/i, '');
    if(!replaceValue) {
        this.value = '';
        return;
    } else {
        this.value = replaceValue;
    }
});

document.getElementById('three').addEventListener('keyup', function() {
    var enteredValue = this.value;
    if(enteredValue == '') return;
    var replaceValue = enteredValue.replace(/[^\d]+/g, '');
    if(!replaceValue) {
        this.value = '';
        return;
    } else {
        this.value = replaceValue;
    }
});