用js判断h5注册页面校验用户名

 h5页面代码

<div class="item">
                        <p class="p_row"><input placeholder="用户名" type="text" name="username" id="username" value="" required="required" onfocus="showTips('span_username','长度不能小于4且不能大于18')" onblur="checkUsername()" onkeyup="checkUsername()"/></p>
                        <span id="span_username"></span>
                    </div>

js代码 

    /*
        校验用户名:
        1.事件: onblur  失去焦点
        2.函数: checkUsername()
        3.函数去显示校验结果
    */
    function checkUsername(){
        //获取用户输入的内容
        var uValue = document.getElementById("username").value.trim();
        //对输入的内容进行校验
        //获得要显示结果的span
        var span = document.getElementById("span_username");
        if(uValue.length == 0){
            //显示校验结果
            span.innerHTML = "<font color='red' size='2'>×,不能为空</font>";
            return false;
        }else if(uValue.length < 4 && uValue.length > 0){
            //显示校验结果
            span.innerHTML = "<font color='red' size='2'>×,用户名太短</font>";
            return false;
        }else if(uValue.length > 18){
            //显示校验结果
            span.innerHTML = "<font color='red' size='2'>×,用户名太长</font>";
            return false;
        }else{
            if(!judeuser(span)){
                span.innerHTML = "<font color='green' size='2'>√,用户名可用</font>";
                name = $("#username").val().trim();
                return true
            }
            else{
                return false;
            }
        }
    }

注：onkeyup 事件会在键盘按键被松开时发生。onblur 事件会在对象失去焦点时发生js事件。