检测用户名和密码 - ellaha

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*高亮通过类样式实现*/
        .light {
            background-color: #f00;
        }
    </style>
    <script>
        window.onload = function () {
            var txtName = document.getElementById('txtName');
            var btnLogin = document.getElementById('btnLogin');
            var txtPwd = document.getElementById('txtPwd');

            // 检测用户名和密码是否满足位数条件 不满足条件高亮显示
            btnLogin.onclick = function () {
                if (txtName.value.length < 3 || txtName.value.length > 6) {

                    // 设置类样式通过className实现
                    txtName.className = 'light';
                    // 不满足条件的时候也会向服务器发送请求，怎么解决？---在这加个return
                    return;
                } else {
　　　　　　　　　　　　// 设置类属性样式为空
                    txtName.className = '';
                }
                if (txtPwd.value.length < 6 || txtPwd.value.length > 8) {
                    txtPwd.className = 'light';
                    // 不满足条件的时候也会向服务器发送请求，怎么解决？---在这加个return
                    return;
                } else {
                    txtPwd.className = '';
                }
                // 向服务器发送请求
                console.log('执行登录');
            }
        }
    </script>
</head>
<body>
用户名<input type="text" name="" id="txtName" placeholder="必填">
密码<input type="password" name="" id="txtPwd" placeholder="必填"><br>
<input type="button" value="登录" id="btnLogin">

</body>
</html>
posted on 2021-03-16 06:50 ellaha 阅读(95) 评论(0) 收藏举报
刷新页面返回顶部