动态网页开发课后作业验证用户名信息是否有效

最新推荐文章于 2024-07-23 11:32:13 发布

默言800

最新推荐文章于 2024-07-23 11:32:13 发布

阅读量94

点赞数

分类专栏： JS作业文章标签： javascript

本文链接：https://blog.csdn.net/qq_59219560/article/details/124863626

版权

JS作业专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课堂案例-验证用户名案例</title>
    <style>
        span {
            display: inline-block;
            width: 250px;
            height: 30px;
            vertical-align: middle;
            line-height: 30px;
            padding-left: 15px;
        }
        
        .error {
            color: red;
            background: url(.//imgs/error1.png) no-repeat left center;
        }
        
        .right {
            color: green;
            background: url(.//imgs/right1.png) no-repeat left center;
        }
    </style>
</head>

<body>
    <input type="text">
    <span></span>
    <script>
        // 获取元素
        let input=document.querySelector('input');
        let span=input.nextElementSibling;

        // 添加监听事件 input blur
        input.addEventListener('blur',function(){
            if(/^[a-zA-Z0-9-_]{6,16}$/.test(input.value)){
                span.className='right';
                span.innerHTML='正确';
            }else{
                span.className='error';
                span.innerHTML='不合法';
            }
        })
    </script>
</body>

</html>

默言800

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态网页开发课后作业验证用户名信息是否有效

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>课.
复制链接

扫一扫