HTML,CSS,JavaScript登录注册页面_html+css登录注册页面验证-CSDN博客

本文链接：https://blog.csdn.net/qq_51359038/article/details/119546356

本页面运用了HTML,CSS,JavaScript，其中，HTML,CSS用于创建表单并进行样式设计，JavaScript用于进行表单验证。

效果图如下：

<!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">
    <link rel="stylesheet" type="text/css" href="登录，注册页面.css">
    <title>动态化网页设计</title>
    <script language="javascript" src="登录，注册页面.js"></script>
</head>
<body>
    <form action="#" name="f1" method="get" onsubmit="return check()">
        <table width="50%" class="default">
            <tr class="title">
                <td class="header" colspan="2">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请注册
                </td>
            </tr>
            <tr>
                <td class="item">用户ID:</td>
                <td><input type="text" name="userid" id="userid" size="20" oncheck="checkid()">
                    <span class="checktext1">6-8位</span>
                </td>
            </tr>
            <tr>
                <td class="item">用户名:</td>
                <td><input type="text" name="username" id="username" size="20" onchange="checkuse()">
                    <span class="checktext2">2-10位</span>
                </td>
            </tr>
            <tr>
                <td class="item">口令:</td>
                <td><input type="text" name="userkouling" id="userkouling" size="18" onchange="checkkouling()">
                    <span class="checktext3">6-8位，不能与用户名相同</span>
                </td>
            </tr>
            <tr>
                <td class="item">确认口令:</td>
                <td><input type="text" name="querenkouling" id="querenkouling" size="18" oncheck="checkquerenkouling">
                </td>

            </tr>
            <tr>
                <td class="item">生日:</td>
                <td><input type="text" name="userbirthday" id="userbirthday" size="22" onblur="checkDate()">
                    <span>格式为：1988-1-1</span>
                </td>
            </tr>
            <tr>
                <td class="item">学历:</td>
                <td><input type="radio" name="xueli" value="1" onchange="checkXueli()">专科
                    <input type="radio" name="xueli" value="2" onchange="checkXueli()">本科
                    <input type="radio" name="xueli" value="3" onchange="checkXueli()">硕士研究生
                    <input type="radio" name="xueli" value="4" onchange="checkXueli()">博士研究生
                    <input type="radio" name="xueli" value="5" onchange="checkXueli()">其他
                </td>
            </tr>
            <tr>
                <td class="item">地区:</td>
                <td>
                    <select id="userplace" emptyInfo="请选择地区。" onblur="checkplace()">
                      
                        <option value="1">东北</option>
                        <option value="2">华北</option>
                        <option value="3">华东</option>
                        <option value="4">华中</option>
                        <option value="5">华南</option>
                        <option value="6">西南</option>
                        <option value="7">西北</option>
                     
                    </select>
                </td>
            </tr>
            <tr>
                <td class="item">E-mail:</td>
                <td><input type="text" name="email" id="email" size="20" onchange="checkemail()"></td>
            </tr>
            <tr>
                <td class="item">地址:</td>
                <td><input type="text" name="space" id="space" size="20" onchange="checkspace()"></td>
            </tr>
            <tr>
                <td class="item">电话:</td>
                <td><input type="text" name="tel" size="20">
                    <span>数字和连字符，例如88223322-123</span>
                </td>
            </tr>
            <tr>
                <td class="item">备注:</td>
                <td><textarea name="beizhu" id="beizhu" rows="5" cols="20" emptyInfo="请填写备注。"
                        onchange="checkbeizhu()"></textarea></td>
            </tr>
            <tr>
                <td><input type="submit" value="提交" class="btn"></td>
                <td><input type="reset" value="重置" class="btn"></td>
            </tr>
        </table>
    </form>
</body>

</html>

table {
    margin: 30px;
    background-color: rgb(212, 237, 100);
}
td {
    height: 30px;
}
td.header {
    font-size: 20px;
    font-weight: bold;
}
td.item {
    text-align: left;
    width: 12%;
}
/* 按钮 */
.btn {
    background: url("../images/btn_bg.gif");
    background-repeat: repeat-x;
    border: 3px double #333333;
    border-color: #909090;
    color: #333333;
    padding: 0 2px;
    font-size: 12px;
    height: 23px;
    cursor: hand;
    margin: 3px;
}

function checkid() {
    var check;

    var userid = document.getElementById("userid").value;

    if (userid.length > 8 || userid.length < 6) {

        alert("用户ID输入不合法，请重新输入！");

        document.getElementById("userid").focus();

        check = false;

    } else {

        document.getElementById("checktext1").innerHTML = " 用户ID符合条件";

        check = true;

    }

    return check;
}

function checkuse() {
    var check;

    var username = document.getElementById("username").value;

    if (username.length > 10 || username.length < 2) {

        alert("用户名输入不合法，请重新输入！");

        document.getElementById("username").focus();

        check = false;

    } else {

        document.getElementById("checktext1").innerHTML = "用户符合条件";

        check = true;

    }

    return check;
}

function checkkouling() {
    var check;

    var userkouling = document.getElementById("userkouling").value;

    if (username.length > 8 || username.length < 6 || userkouling == username) {

        alert("口令输入不合法，请重新输入！");



        document.getElementById("userkouling").focus();

        check = false;
    }


    return check;
}


function checkquerenkouling() {
    var check;

    var userquerenkouling = document.getElementById("userquerenkouling").value;

    if (userquerenkouling != userkouling) {

        alert("口令输入错误，请重新输入！");


        document.getElementById("userquerenname").focus();

        check = false;

    } else {

        alert("口令已确认!");
        check = true;

    }

    return check;
}

function checkDate() {
    var birthday = document.getElementById('userbirthday').value;
    if (!/^\d{4}([\/\-]?)\d{1,2}\1\d{1,2}$/.test(userirthday)) {
        alert('生日格式错误');
        return false;
    }
}


function checkXueli() {

    var check;

    var xueli = "";



    var xueli = document.getElementsByName("xueli");



    for (var i = 0; i < xueli.length; ++i) {



        if (xueli[i].checked)

            xueli = xueli[i].value;

    }

    if (xueli == "") {

        alert("请选择学历！");

        check = false;

    } else {

        alert("学历已选择");

        check = true;

    }

    return check;

}

function checkplace() {

    var check;

    if (document.getElementById("userplace").selectedIndex == 0) {

        alert("请选择地区！");

        document.getElementById("userplace").focus();

        check = false;

    } else {

        alert("地区已选择")

        check = true;

    }

    return check;

}


function checkemail() {

    var check;


    var e1 = document.getElementById("email").value.indexOf("@", 0);

    var e2 = document.getElementById("email").value.indexOf(".", 0);

    if (email == "" || (e1 == -1 || e2 == -1) || e2 < e1) {

        alert("E-mail输入错误!");

        document.getElementById("email").focus();

        check = false;

    } else {

        alert("E-mail格式正确")

        check = true;

    }

    return check;

}

function checkspace() {
    if (space.length == 0) {
        alert("地址不能为空!");
        return false;
    }
    return true;
    alert("地址不能为空!");
}

function checkbeizhu() {
    if (beizhu.length == 0) {
        alert("备注不能为空!");
        return false;
    }
    return true;
    alert("备注不能为空!");
}


function check() {

    var check = checkid() && checkuse() && checkkouling && checkquerenkouling && checkXueli() && checkplace() && checkemail() && checkspace && checkbeizhu();
    if (check) {
        alert("格式正确");
    }
    else {
        alert("格式错误");
    }
}