JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text"  id="plates" pattern="^[A-Z]{2} ?- ?\d{3} ?- ?[A-Z]{2}$"/>

CSS

input{border:1px solid #D0D0D0;height:50px;}

JavaScript

function check(s) {
    var toks = s.split('-');
    //console.log(toks);
    switch(toks.length){
        case 3:
        if (!/^[A-Za-z]{0,2}$/.test(toks[2].trim())) return false;
        case 2:
        if (!/^\d{0,3}$/.test(toks[1].trim())) return false;
        case 1:
        return /^[A-Za-z]{0,2}$/.test(toks[0].trim());
        default:
        return false;
    }
}
var oldvalue = '';
$('#plates').keyup(function(){
    if (!check(this.value)) {
        this.value = oldvalue;
    } else {
        oldvalue = this.value = this.value.toUpperCase();
    }
});