登陆框——用javascript 做

最新推荐文章于 2023-11-23 13:04:56 发布

爱编码的程序员

最新推荐文章于 2023-11-23 13:04:56 发布

阅读量224

点赞数

分类专栏：知识总结 Html 作业文章标签： javascript js html vue.js node.js

本文链接：https://blog.csdn.net/weixin_43501566/article/details/105695536

版权

知识总结同时被 3 个专栏收录

42 篇文章 0 订阅

订阅专栏

Html

10 篇文章 0 订阅

订阅专栏

作业

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .loginForm span{
            color: red;
            display: none;
        }
    </style>
</head>
<body>
    <!--
        1. 用户名的不能为空, 并且长度要为4~6之间（js的String类型有 length属性）.
        2. 密码不能为空.
        3. 重复密码要和密码相同。
     -->
<form class="loginForm">
    用户名　：<input type="text" autocomplete="off" name="username" id="username">
                <span id="usernameIsNull">用户名不能为空</span>
                <span id="usernameLengthError">用户名长度要为4~6之间</span><br>
    密码　　：<input type="password" name="password" id="password">
                <span id="passwordIsNull">密码不能为空</span><br>
    验证密码：<input type="password" name="repassword" id="repassword">
                <span id="passwordNotSame">密码不一致</span><br>
</form>
</body>
<script>
    var username = document.getElementById('username');//用户名
    var usernameIsNull = document.getElementById('usernameIsNull');//用户名为空提示框
    var usernameLengthError = document.getElementById('usernameLengthError');//用户名长度不为4-6提示框
    var password = document.getElementById('password');//密码
    var passwordIsNull = document.getElementById('passwordIsNull');//密码为空提示框
    var repassword = document.getElementById('repassword');//验证密码
    var passwordNotSame = document.getElementById('passwordNotSame');//密码与验证密码不一致提示框

    //用户名的验证
    var usernameValue;//保存用户名输入框中的值
    username.onfocus = function () {
        usernameIsNull.style.display = 'none';//让提示框隐藏
        usernameLengthError.style.display = 'none';
    }

    username.onblur =function () {
        usernameValue = username.value;
        //判断用户名是否为空
        if(usernameValue == ''){
            usernameIsNull.style.display = 'inline-block';
        }

        //判断用户名长度是否在4-6之间
        if(usernameValue.length < 4 || usernameValue.length > 6){
            usernameLengthError.style.display = 'inline-block';
        }
    }

    //密码的验证
    var passwordValue;//保存密码输入框中的值
    password.onfocus = function () {
        passwordIsNull.style.display = 'none';
    }

    password.onblur =function () {
        passwordValue = password.value;
        //判断密码是否为空
        if (passwordValue == '') {
            passwordIsNull.style.display = 'inline-block';
        }
    }

    //验证密码是否与密码一致
    var repasswordValue;//保存验证密码输入框中的值
    repassword.onfocus = function () {
        passwordNotSame.style.display = 'none';
    }

    repassword.onblur =function () {
        repasswordValue = repassword.value;
        //判断验证密码是否与密码一致
        if (repasswordValue != passwordValue) {
            passwordNotSame.style.display = 'inline-block';
        }
    }

</script>
</html>

效果图
示例图片

爱编码的程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
登陆框——用javascript 做

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .loginForm span{ color: red; ...
复制链接

扫一扫