js简单的登录框验证

初学正则 写了个登录框的验证

先看效果

user.oninput = function (){
    //获取用户名
    if( user.value.length > 0 ){

        //显示删除按钮
        delIcon.style.display = "block";

    }else{
        //隐藏删除按钮
        delIcon.style.display = "none";
    };
}


 //注册点击事件
 delIcon.onclick = function(){
    //清空用户名
    user.value = "";

    //隐藏自己
    this.style.display = "none";
}


 //失去焦点触发验证用户名是否合法
 user.onblur = function(){
        
    //获取输入的用户名
    var userVal = user.value;

    //创建验证规则
    var reg = /^[A-z]\w{5,11}$/;//以字母开头,后面数字 字母 下划线共6-12位

    //验证是否存在
    var result = reg.test( userVal );

    //根据验证结果显示提示信息
    if(result){
        //正确
        userError.innerHTML = "正确";
    }else{
        //错误
        userError.innerHTML = "超出限定字数";
        userError.style.color = "red";
    }
    
    
}

忘了写按钮 还有些地方没有完善 就先 尝试下
哈哈