JavaScript（三十二）一次性表单验证demo

最新推荐文章于 2022-08-26 00:30:00 发布

We_jia

最新推荐文章于 2022-08-26 00:30:00 发布

阅读量190

点赞数

分类专栏： JavaScript 文章标签：表单验证

本文链接：https://blog.csdn.net/We_jia/article/details/87892525

版权

JavaScript 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

一次性表单验证

所有信息填完以后，点击注册，若某一项内容不符合要求就会报错，若没有报错就会注册成功！

效果展示

全部代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./css/iconfont.css"/>
    <style>
        #formuser {
            display: block;
            margin: 0 auto;
            width: 400px;
        }

        .form_user > li {
            list-style: none;
            height: 50px;
            width: 400px;
            border: 1px solid silver;
            border-radius: 5px;
            position: relative;
            margin: 40px 0;
        }

        .form_user > li.litxt > input {
            margin-left: 1px;
            width: 378px;
            height: 48px;
            border-style: none;
            outline: none;
            font-size: 20px;
            color: black;
            padding-left: 20px;

        }

        .tel {
            position: relative;
            border-style: none !important;
        }

        .usertelno {
            width: 150px;
            height: 50px;
            border: 1px solid silver;
            border-radius: 5px;
            line-height: 50px;
            position: relative;
            float: left;
        }

        .usertelno > input {
            position: absolute;
            top: 0;
            left: 1px;
            width: 120px;
            height: 48px;
            padding-left: 20px;
            border-style: none;
            font-size: 20px;
            outline: none;
        }

        #icon {
            position: absolute;
            right: 10px;
            top: 0;
            z-index: 2;
            color: gray;
        }

        .ph {
            float: right;
            width: 210px;
            height: 50px;
            border-radius: 5px;
            border: 1px solid silver;
            font-size: 20px;
            padding-left: 20px;
            outline: none;
        }


        .btn > input {
            width: 400px;
            height: 50px;
            outline: none;
            border-style: none;
            background-color: transparent;
            color: white;
            font-size: 22px;
        }

        .btn {
            background-color: #2e7fff;
        }

        .btn:hover {
            background-color: #40a6ff;
        }

        .telerror {
            clear: left;
            display: block;
            font-size: 14px;
            color: gray;
            position: relative;
            top: 5px;
        }

        .emailshow {
            display: block;
            font-size: 14px;
            color: gray !important;
            position: absolute;
            top: 53px;
        }

        .error {
            font-size: 14px;
            color: red;
            position: absolute;
            top: 53px;
            left: 0;
            background-image: url("./img/error@2x.png");
            background-repeat: no-repeat;
            background-size: 20px;
            padding-left: 25px;
        }

        .success {
            display: none;
            position: absolute;
            top: 15px;
            right: 10px;
        }
    </style>
</head>
<body>
<!--每一条单独验证 全部符合以后 判断error为空的个数 提交-->
<form id="formuser" action="" method="get" onsubmit="return submethods()">
    <ul class="form_user">
        <li class="litxt">
            <input type="text" class="userData" name="email" placeholder="邮箱" value=""/>
            <span class="emailshow">请输入你常用的邮箱（非qq/foxmail邮箱）</span>
            <img class="success" src="./img/tick.png" alt=""/>
            <span class="error"></span>
        </li>
        <li class="litxt">
            <input type="text" class="userData" name="nickname" placeholder="昵称" value=""/>
            <img class="success" src="./img/tick.png" alt=""/>
            <span class="error"></span>
        </li>
        <li class="litxt">
            <input type="text" class="userData" name="password" placeholder="密码" value=""/>
            <img class="success" src="./img/tick.png" alt=""/>
            <span class="error"></span>
        </li>
        <li class="tel">
            <div class="usertelno">
                <input id="telnum" type="text" value="+86"/>
                <i id="icon" class=" iconfont">&#xf01a6;</i>
            </div>
            <input class="ph" placeholder="手机号码" type="text"/>
            <span class="telerror">可通过该手机号找回密码</span>
        </li>
        <li class="btn"><input type="submit" value="立即注册"/></li>
    </ul>
</form>

</body>
<script>
    var emailshow = document.getElementsByClassName("emailshow")[0];   //获取到  请输入你常用的邮箱
    var litxt = document.getElementsByClassName("litxt");   //获取三个框的父元素
    var error = document.getElementsByClassName("error");
    var success = document.getElementsByClassName("success");
    var userData = document.getElementsByClassName("userData");  //获取三个框 input
    var nameinfo = ["邮箱", "昵称", "密码"];
    function submethods() {
        emailshow.style.display = "none";
        for (var i = 0; i < litxt.length; i++) {
            if (litxt[i].children[0].value == "") {
                litxt[i].style.borderColor = "red";
                error[i].innerHTML = nameinfo[i] + "不能为空！";
            }
            else {
                //不为空的情况下  判断格式的问题
                if (i == 0) {
                    if (userData[i].value.indexOf("@") != -1 && userData[i].value.indexOf("@") + 1 != userData[i].value.length) {
                        success[i].style.display = "block";
                        error[i].innerHTML = "";
                        litxt[i].style.borderColor = "silver";

                    }
                    else {
                        error[i].innerHTML = nameinfo[i] + "格式不正确！";

                    }
                }
                if (i == 1) {
                    success[i].style.display = "block";
                    error[i].innerHTML = "";
                    litxt[i].style.borderColor = "silver";

                }
                if (i == 2) {
                    /*6-8位*/
                    if (userData[i].value.length >= 6 && userData[i].value.length <= 8) {
                        if (!isNaN(userData[i].value)) {
                            error[i].innerHTML = nameinfo[i] + "必须有字母或者是字符！";

                        }
                        else {
                            error[i].innerHTML = "";
                            litxt[i].style.borderColor = "silver";
                            success[i].style.display = "block";

                        }
                    }
                    else {
                        error[i].innerHTML = nameinfo[i] + "位数在6-8位之间！";

                    }
                }
            }

        }
        //提交的时候判断
        for (var i = 0; i < error.length; i++) {
            if (error[i].innerHTML != "") {
                return false;
            }
        }
        return true;
    }
</script>
</html>