form元素值的操作获得和丧失焦点事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form元素值的操作获得和丧失焦点事件</title>
</head>
<body>
    邮箱:<input type="text" value=""><br>
    用户名:<input type="text" id='username' value="iloveyouverymuch" style="padding:5px;"><span>请输入8~18位字母数字下划线</span><br>
 
    <script type="text/javascript">
    //获取元素
    var user = document.getElementById('username');
    //获取元素的值
    // var v = user.value;
 
    //值的设置
    // user.value = '三拉黑曜';
 
    //当元素处于激活状态的时候 会触发onfocus事件
    user.onfocus = function(){//focus 焦点
        //修改样式
        this.style.border = "solid 2px pink";
    }
 
    //丧失焦点事件
    user.onblur = function(){
        //获取当前元素的值
        var v = this.value;
        //声明正则
        var reg = /^\w{8,18}$/;
        //判断
        var res = reg.test(v);
        if(!res){
            alert('格式错误');
            this.style.border = "solid 2px red";
        }else{
            this.style.border = "solid 2px green";
        }
    }
 
 
 
 
    </script>
 
</body>
</html>
原文链接：https://blog.csdn.net/a916123063/article/details/51769348