JavaScript - 用户名表单验证

效果

代码

html：

    <input type="text" class="uname">
    <span>请输入用户名</span>
    <div class="hint"></div>

css：

        label {
            color: #ccc;
        }

        .right {
            color: green;
        }

        .wrong {
            color: red;
        }

javascript

 var uname = document.querySelector('.uname');
        var span = document.querySelector('span');
        // 正则表达式，可以输入6到16位的 a-z A-Z 0-9 或下划线_和分隔符 - 
        var reg = /^[a-zA-Z0-9_-]{6,16}$/;  

        //如果用户名输完了（失焦），则让它加一个right类，颜色变绿
        //修改span里的文字
        uname