(练习) js 表单验证，登录注册

最新推荐文章于 2024-01-20 17:50:18 发布

邢帥兵_

最新推荐文章于 2024-01-20 17:50:18 发布

阅读量282

点赞数 1

分类专栏： js html css 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_64875238/article/details/126189302

版权

js 同时被 3 个专栏收录

41 篇文章 29 订阅

订阅专栏

html

14 篇文章 0 订阅

订阅专栏

css

6 篇文章 1 订阅

订阅专栏


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .conter {
            margin: 0 auto;
            /* padding: 20px; */
            width: 550px;
            height: 500px;
            box-shadow: 1px 1px 3px #000;
            overflow: hidden;
        }

        input {
            width: 250px;
            height: 30px;
        }

        h1 {
            line-height: 1;
            width: 550px;
            /* height: 100px; */
            border-bottom: 5px solid #3275c3;
            margin: 0;
            padding: 20px;
        }

        p {
            margin-left: 40px;
        }

        button {
            width: 100px;
            height: 40px;
            background-color: #6291d5;
            border: 2px solid #d3e1fb;
            border-radius: 10px;
            font-size: 18px;
            color: #fff;
            margin-left: 150px;
        }

        .cuowu {
            border: 2px solid #f00;
        }

        .dui {
            border: 2px solid #3275c3;
        }
    </style>
</head>

<body>
    <div class="conter">`
        <h1>新用户注册</h1>
        <form action="">
            <p>
                <span>&emsp;用户名：</span><input type="text" id="id">
            </p>
            <p>
                <span>&emsp;&emsp;密码：</span><input type="password" id="pwd">
            </p>
            <p>
                <span>确认密码：</span><input type="password" id="pswd">
            </p>
            <p>
                <span>电子邮箱：</span><input type="text" id="you">
            </p>
            <p>
                <span>手机号码：</span><input type="text" id="shouji">
            </p>
            <p>
                <span>&emsp;&emsp;生日：</span><input type="text" id="sheng">
            </p>
            <button type="submit" id="submit">注册完成</button>
        </form>
    </div>

</body>
<script>
    var oIpt1 = document.getElementById("id");
    var oIpt2 = document.getElementById("pwd");
    var oIpt3 = document.getElementById("pswd");
    var oIpt4 = document.getElementById("you");
    var oIpt5 = document.getElementById("shouji");
    var oIpt6 = document.getElementById("sheng");
    var obtn = document.getElementById("submit");
    var false1 = false, false2 = false, false3 = false,
        false4 = false, false5 = false, false6 = false;


    // 用户名--------------------------
    oIpt1.onblur = function () {
        var zh = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
        var val = oIpt1.value;
        if (val.length === 0) {
            alert("名字不能为空");
            false1 = false;
            oIpt1.className = "cuowu"; //条件不成立时  添加 类名（边框变红）
            return;
        } if (zh.test(val) === false) {
            alert("输入格式不对");
            false1 = false;
            oIpt1.className = "cuowu";  //条件不成立时  添加 类名（边框变红）
            return;
        } else {
            oIpt1.className = "dui"; //条件成立时  添加 类名（边框变蓝）
            false1 = true;
        }
    }

    // 密码--------------------------
    oIpt2.onblur = function () {
        var zh = /^[a-zA-Z0-9]{4,13}$/;
        var val = oIpt2.value;
        if (val.length === 0) {
            alert("名字不能为空");
            false1 = false;
            oIpt2.className = "cuowu"; //条件不成立时  添加 类名（边框变红）
            return;
        } if (zh.test(val) === false) {
            alert("输入格式不对");
            false1 = false;
            oIpt2.className = "cuowu";  //条件不成立时  添加 类名（边框变红）
            return;
        } else {
            oIpt2.className = "dui"; //条件成立时  添加 类名（边框变蓝）
            false2 = true;
        }
    }


    // 确认密码--------------------------
    oIpt3.onblur = function () {
        var val = oIpt3.value;
        if (val.length === 0) {
            alert("名字不能为空");
            false1 = false;
            oIpt3.className = "cuowu"; //条件不成立时  添加 类名（边框变红）
            return;
        } if (val !== oIpt2.value) {
            alert("输入密码不一致");
            false1 = false;
            oIpt3.className = "cuowu";  //条件不成立时  添加 类名（边框变红）
            return;
        } else {
            oIpt3.className = "dui"; //条件成立时  添加 类名（边框变蓝）
            false3 = true;
        }
    }

    // 电子邮箱--------------------------
    oIpt4.onblur = function () {
        var val = oIpt4.value;
        var zh = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        if (val.length === 0) {
            alert("邮箱不能为空");
            false4 = false;
            oIpt4.className = "cuowu"; //条件不成立时  添加 类名（边框变红）
            return;
        } if (zh.test(val) === false) {
            alert("输入邮箱格式不对");
            false4 = false;
            oIpt4.className = "cuowu";  //条件不成立时  添加 类名（边框变红）
            return;
        } else {
            oIpt4.className = "dui"; //条件成立时  添加 类名（边框变蓝）
            false4 = true;
        }
    }

    //手机号----------------------------------------------
    oIpt5.onblur = function () {
        var val = this.value;
        var zh = /^[1][0-9]{10}$/;
        if (val.length === 0) {
            alert("不能为空");
            false5 = false;
            oIpt5.className = "cuowu"; //条件不成立时  添加 类名（边框变红）
            return;
        } if (zh.test(val) === false) {
            alert("输入号码格式不对");
            false5 = false;
            oIpt5.className = "cuowu";  //条件不成立时  添加 类名（边框变红）
            return;
        } else {
            oIpt5.className = "dui"; //条件成立时  添加 类名（边框变蓝）
            false5 = true;
        }
    }

    //生日-------------------------------------------------
    oIpt6.onblur = function () {
        var val = this.value;
        var zh = /^(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)$/;
        if (val.length === 0) {
            alert("不能为空");
            false6 = false;
            oIpt6.className = "cuowu"; //条件不成立时  添加 类名（边框变红）
            return;
        } if (zh.test(val) === false) {
            alert("输入格式不对");
            false6 = false;
            oIpt6.className = "cuowu";  //条件不成立时  添加 类名（边框变红）
            return;
        } else {
            oIpt6.className = "dui"; //条件成立时  添加 类名（边框变蓝）
            false6 = true;
        }
    }


    //提交-------------------------------------------------

    obtn.onclick = function () {
        if (!false1 || !false2 || !false3 || !false4 || !false5 || !false6) {
            alert("请重新检查表单");
            return false
        }
    }

</script>

</html>