原生js+正则表达式实现失去焦点时验证用户名

需求：如果用户名合法，则后面提示信息为：用户名合法，并且颜色变为绿色
如果用户名不规范，则后面提示信息为：用户名不规范，并且颜色变为红色

css代码

    <style>
        .right{
            color: green;
        }
        .wrong{
            color: red;
        }
    </style>

html代码

    <input type="text" value="" id="in"><span>请输入用户名</span>

js代码

    <script>
        var username=/^[A-Za-z0-9]{6,12}$/;
        //输入用户名为大写字母A-Z或者小写字母a-z或者0-9 并且位数在6-12就匹配

        var ele=document.getElementById('in');
        var span = document.querySelector('span');
        // ele.blur(function(){
        //     var str = ele.value;
        //     console.log(666);  //blur方法无效？  
        // })
        ele.onblur=function(){
            if(username.test(ele.value)){
                span.className="right";
                span.innerHTML="用户名合法";
            }else{
                span.className="wrong";
                span.innerHTML="用户名不规范";
            }
        }
    </script>

效果演示：

符合要求

用户名只有3位不符合要求