SOURCE

class Validator{
    constructor(){

    }
    number(obj,minmax){
        let [min,max]= minmax.split('-');
        console.log(min,max);
        let isNumber = /\d+/.test(`${obj}`);
        if(isNumber){
            min = parseInt(min);
            max = parseInt(max);
            // console.log(`obj is ${obj},min is ${min},max is ${max}`);
            if(obj<min || obj>max){
                return false;
            }else{
                return true;
            }
        }
        return false;
    }
    length(obj,minmax){
        let [min,max]= minmax.split('-');
        if(obj.length<min||obj.length>max){
            return false;
        }
        return true;
    }
}

document.querySelectorAll('[validate]').forEach(item=>{
    item.addEventListener('keyup',function(){
        let rules = this.getAttribute('rule').split(';');
        let value = this.value;
        let validator = new Validator();
        if(rules){
            let result = rules.every((item)=>{
                let [name,cts] = item.split(":");
                return validator[name](value,cts);;
            });
            this.classList[result?'remove':'add']('error');
        }
    });
});

<form action="">
    <div class="row">
        <label for="username">username</label>
        <input type="text" validate rule="number:1-10000;length:3-10" id="username"/>
        <label for="pwd">password</label>
        <input type="text" validate rule="number:1-10000;length:2-8" id="pwd"/>
    </div>
</form>

input.error{
    background: red;
}