用JS的‘ if...else ’做【网站登录的用户表单验证】

最新推荐文章于 2023-07-04 10:22:38 发布

梦境工程师-335

最新推荐文章于 2023-07-04 10:22:38 发布

阅读量2.1k

点赞数 4

分类专栏：前端作品大集合前端_Javascript 文章标签： html5 css3 javascript 前端 html

本文链接：https://blog.csdn.net/qq_41136216/article/details/105788340

版权

前端作品大集合同时被 2 个专栏收录

23 篇文章 18 订阅

订阅专栏

前端_Javascript

20 篇文章 0 订阅

订阅专栏

文章目录

为了减少服务器负载，将表单计算验证环节在客户浏览器上执行，验证完成基本的格式后，再提交给服务器进行数据处理，那么，前端如何用JS做网站登录的用户表单验证？
在这里插入图片描述

一，提出问题

制作一个表单，前三个文本框不为空，且长度不能少于 6 位，其余单选按钮，复选按钮和下拉菜单都为必选项，不能为空

二，解决思路

（1）按照正常的逻辑，先写一些html标签

在这里插入图片描述

（2）然后用点CSS优化下表单，让其变得好看一点

在这里插入图片描述

（3）写JS代码的逻辑

为了数据的严谨性，我们采用严格模式进行判断，这里我们抽取一段代码来进行判断，之后依次类推，按个复制修改下判断逻辑让判断结果为真或假后继续嵌套下去

通过Name值对表单输入框进行获取

        //采用严格模式进行判断
        "user strict"
        //通过name对input框的对象
        var username = document.getElementsByName("username"); //用户名

然后将获取的值进行逻辑比较，主要排除Value为空，长度大于 6

   //用户名格式判断
if (username[0].value != "" && username[0].value != null && username[0].value.length >= 6) {

三，index.html 文件代码（复制粘贴即可运行）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>
    <style>
        form {
            position: relative;
            width: 600px;
            padding: 20px;
            font-weight: 600;
            border-radius: 14px;
            box-shadow: 2px 2px 12px #3c3c3c;
            background: darkgray;
            margin: 5% auto;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.8s ease;
        }

        form:hover {
            background: rgb(219, 219, 219);
        }

        form input,
        select {
            border: none;
            border: 1px solid salmon;
            border-radius: 2px;
        }

        button {
            color: rgb(224, 44, 24);
            width: 80px;
            padding: 2px 10px;
            border: none;
            border: 2px solid salmon;
            border-radius: 4px;
        }

        #displayBan {
            position: absolute;
            top: 100%;
            right: 0;
            width: 30%;
            height: 100%;
            border-left: 20px solid seashell;
            background-color: rgb(245, 130, 117);
            transition: all 0.2s ease-in;
        }

        #displayBan span {
            display: block;
            width: fit-content;
            margin-top: 6%;
            padding: 0 4px;
            color: rgb(255, 244, 182);
            text-shadow: 1px 1px rgb(141, 27, 141);
            background-color: skyblue;
        }

        #displayBan:hover {
            width: 42%;
            border-left: 20px solid rgb(111, 214, 255);
        }

        #HT {
            line-height: 36px;
            text-align: center;
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <iframe name="IFR" src="" frameborder="0" style="display: none;"></iframe>
    <form target="IFR" onsubmit="return check();">
        <h2 style="color: rgb(255, 255, 255);text-shadow: 2px 1px rgb(15, 178, 228);">用户注册表</h2>
        <p><label>用 户 名：</label>&nbsp;<input type="text" name="username"></p>
        <p><label>密 码：</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" name="password1"></p>
        <p><label>确认密码：</label><input type="password" name="password2"></p>
        <p><label>性别：</label>男<input type="radio" name="sex"> &nbsp;女<input type="radio" name="sex" class="sex"></p>
        <p><label>爱好：</label><input type="checkbox" name="favor1">摄影<input type="checkbox" name="favor2">旅游
        </p>
        <p><label>省份：</label>
            <select name="province">
                <option value="UFO" selected="selected">神秘基地</option>
                <option value="Guizhou">贵州</option>
                <option value="Guangxi">广西</option>
                <option value="Sichuan">四川</option>
                <option value="Chongqing">重庆</option>
            </select>
        </p>
        <p><button type="submit">提交</button></p>
        <div id="displayBan">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </form>
    <h2 id="HT"></h2>

    <script>
        //采用严格模式进行判断
        "user strict"
        //通过name对input框的对象
        var username = document.getElementsByName("username"); //用户名
        var password1 = document.getElementsByName("password1"); //第一次密码
        var password2 = document.getElementsByName("password2"); //第二次密码
        var sex = document.getElementsByName("sex"); //性别
        var favor1 = document.getElementsByName("favor1"); //爱好1
        var favor2 = document.getElementsByName("favor2"); //爱好2
        var province = document.getElementsByName("province"); //省份
        var displayBan = document.getElementById("displayBan"); //左侧信息显示块
        var displayBanSpan = displayBan.querySelectorAll("span"); //左侧信息显示条
        var HT = document.getElementById("HT"); //底部验证是否通过的信息大块

        function check() {
            displayBan.style.top = "0px";
            //保证表单提交值的顺序和安全检测的顺序，采用if...else进行判断嵌套，层层判断后再到密码判断
            //针对前三个文本框进行判断

            //用户名格式判断
            if (username[0].value != "" && username[0].value != null && username[0].value.length >= 6) {
                displayBanSpan[0].innerHTML = "用户名格式 正确 <font style=\"color:lightgreen;\">✔</font>";

                //第一次密码格式判断
                if (password1[0].value != "" && password1[0].value != null && password1[0].value.length >= 6) {
                    displayBanSpan[1].innerHTML = "第一次密码格式 正确 <font style=\"color:lightgreen;\">✔</font>";

                    //第二次密码格式判断
                    if (password2[0].value != "" && password2[0].value != null && password2[0].value.length >= 6) {
                        //针对后4个input框进行判断
                        displayBanSpan[2].innerHTML = "第二次密码格式 正确 <font style=\"color:lightgreen;\">✔</font>";

                        //性别格式判断
                        if (sex[0].checked === true || sex[1].checked === true) {
                            displayBanSpan[3].innerHTML = "性别必选项已选 正确 <font style=\"color:lightgreen;\">✔</font>";

                            //爱好是否选择判断
                            if (favor1[0].checked === true || favor2[0].checked === true) {
                                displayBanSpan[4].innerHTML = "爱好必选项已选 正确 <font style=\"color:lightgreen;\">✔</font>";

                                //省份是否选择判断
                                if (province[0].value !== "" && !province[0].value !== null) {
                                    displayBanSpan[5].innerHTML =
                                        "省份必选项已选 正确 <font style=\"color:lightgreen;\">✔</font>";
                                    displayBanSpan[6].innerHTML = "☆ 表单已经完成填报 ☆";

                                    //判断密码是否相等，密码相等就让token为true,为后面触发底部信息显示通过做铺垫
                                    var token = (parseInt(password1[0].value) === parseInt(password2[0].value)) ? true :
                                        false;

                                    // 密码是否通过触发底部信息提示
                                    if (token) {
                                        document.body.style.backgroundColor =
                                            "#000";
                                        HT.innerHTML = "欢迎您，验证通过！已成功注册 <font style=\"color:lightgreen;\">✔</font>";
                                    } else {
                                        HT.innerHTML = "非常抱歉，密码错误！请重新输入 <font style=\"color:red;\"> !</font>";
                                    }

                                } else {
                                    displayBanSpan[5].innerHTML = "省份选项为必选项，请选择<font style=\"color:red;\"> !</font>";
                                }
                            } else {
                                displayBanSpan[4].innerHTML = "爱好选项为必选项，请选择<font style=\"color:red;\"> !</font>";
                            }
                        } else {
                            displayBanSpan[3].innerHTML = "性别选项为必选项，请选择<font style=\"color:red;\"> !</font>";
                        }
                    } else {
                        displayBanSpan[2].innerHTML =
                            "第二次输入密码不符合要求，请输入密码不为空且长度不小于6 <font style=\"color:red;\"> !</font>";
                    }
                } else {
                    displayBanSpan[1].innerHTML = "第一次输入密码不符合要求，请输入密码不为空且长度不小于6 <font style=\"color:red;\"> !</font>";
                }
            } else {
                displayBanSpan[0].innerHTML = "输入的用户名不符合要求，请输入用户名不为空且长度不小于6 <font style=\"color:red;\"> !</font>";
            }
        }
    </script>
</body>

</html>

四，最终效果演示

当用户输入值错误的时候，表单进行格式错误提示
在这里插入图片描述
当用户输入值正确的时候，表单信息格式全部合格，且密码正确，验证通过

梦境工程师-335

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用JS的‘ if...else ’做【网站登录的用户表单验证】

文章目录提出问题解决思路（1）按照正常的逻辑，先写一些html标签（2）然后用点CSS优化下表单，让其变得好看一点（3）写JS代码的逻辑index.html 文件代码（复制粘贴即可运行）为了减少服务器负载，将表单计算验证缓解在客户浏览器上执行，验证完成基本的格式后，再提交给服务器进行数据处理，那么，前端如何用JS做网站登录的用户表单验证？提出问题制作一个表单，前三个文本框不为空，且长度...
复制链接

扫一扫