041-Web前端-JS-样例：注册条件判断

最新推荐文章于 2022-11-07 22:28:01 发布

我的肚肚有点儿疼

最新推荐文章于 2022-11-07 22:28:01 发布

阅读量176

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/fenfen_vyron/article/details/106907167

版权

Web前端专栏收录该内容

46 篇文章 0 订阅

订阅专栏

文档事件案例：注册条件判断
#6.22

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册用户案例</title>
    <style>
        .borderGreen {
            border: 2px solid lightgreen;
        }

        .colorGreen {
            color: lightgreen;
        }

        .borderRed {
            border: 2px solid red;
        }

        .colorRed {
            color: red;
        }
    </style>
</head>
<body>
<p>
    <span>手机号：</span>
    <input type="text" class="username">
    <span class="userNameSpan"></span>
</p>
<p>
    <span>密码：</span>
    <input type="text" class="password">
    <span class="passwordSpan"></span>
</p>
<button disabled>提交</button>


<script>
    var userNameInput = document.querySelector('.username');
    var passwordInput = document.querySelector('.password');
    var userNameSpan = document.querySelector('.userNameSpan');
    var passwordSpan = document.querySelector('.passwordSpan');
    var but = document.querySelector("button");

    function check() {
        if (userNameSpan.innerHTML == '正确' && passwordSpan.innerHTML == '正确') {
            //删除disabled按钮
            but.removeAttribute('disabled');
        } else {
            //添加disabled按钮
            but.setAttribute('disabled', 'disabled');//注意参数
        }
    }

    userNameInput.onblur = function () {
        var userName = userNameInput.value;
        if (userName.length == 11) {    //小心
            userNameInput.setAttribute('class', 'borderGreen');
            userNameSpan.innerHTML = '正确';
            userNameSpan.setAttribute('class', 'colorGreen');
        } else {
            userNameInput.setAttribute('class', 'borderRed');
            userNameSpan.innerHTML = '格式错误！';
            userNameSpan.setAttribute('class', 'colorRed');
        }
        check();
    }
    passwordInput.onblur = function () {
        var pass = passwordInput.value;
        if (pass.length > 6 && pass.length < 12) {
            passwordInput.setAttribute('class', 'borderGreen');
            passwordSpan.innerHTML = '正确';
            passwordSpan.setAttribute('class', 'colorGreen');
        } else {
            passwordInput.setAttribute('class', 'borderRed');
            passwordSpan.innerHTML = '密码长度需要6-12位！';
            passwordSpan.setAttribute('class', 'colorRed');
        }
        check();
    }
</script>

</body>
</html>

我的肚肚有点儿疼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
041-Web前端-JS-样例：注册条件判断

文档事件案例：注册条件判断#6.22<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>注册用户案例</title> <style> .borderGreen { border: 2px solid lightgreen; } .col
复制链接

扫一扫