JavaScript——案例-表单验证

需求

  

   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="reg-form" action="#" method="post">
        用户名：<input type="text" name="username" id="username"><br>
        <span id="username_err" class="err_msg" style="display: none">用户名输入有误</span><br>
          密码：<input type="password" name="password" id="password"><br>
        <span id="password_err" class="err_msg" style="display: none">密码输入有误</span><br>
        <input type="submit">

    </form>

    <script>
        // 1. 验证用户名是否符合规则
        // 1.1 获取用户名的输入框
        var usernameInput = document.getElementById("username");

        // 1.2 绑定onblur事件  失去焦点
        usernameInput.onblur = checkUsername;

        function checkUsername(){
            // 1.3 获取用户输入的用户名
            var username = usernameInput.value.trim(); //去除空格

            var flag1 = username.length >= 6 && username.length <= 12;
            // 1.4 判断用户名是否符合规则，长度6-12
            if(flag1){
                document.getElementById("username_err").style.display = "none";
            }else{
                document.getElementById("username_err").style.display = "";
            }
            return flag1;
        }

        // 1. 验证密码是否符合规则
        // 1.1 获取密码的输入框
        var passwordInput = document.getElementById("password");

        // 1.2 绑定onblur事件  失去焦点
        passwordInput.onblur = checkPassword;
            function checkPassword(){
            // 1.3 获取用户输入的密码
            var password = passwordInput.value.trim(); //去除空格
            var flag2 = password.length >= 6 && password.length <= 12;
            // 1.4 判断密码是否符合规则，长度6-12
            if(flag2){
                document.getElementById("password_err").style.display = "none";
            }else{
                document.getElementById("password_err").style.display = "";
            }
            return flag2;
        }

        // 提交验证
        // 1. 获取表单对象
        var regForm = document.getElementById("reg-form");

        // 2. 绑定 onsubmit 事件
        regForm.onsubmit = function (){
            // 挨个判断每一个表单项是否都符合要求，如果有一个不符合，则返回false
            return  checkPassword() && checkUsername();
        }

    </script>
</body>
</html>

 

posted @ 2022-09-29 15:03  风陵南  阅读(76)  评论(0)    收藏  举报