web 实验5

最新推荐文章于 2024-10-10 20:59:20 发布

Ayyy_

最新推荐文章于 2024-10-10 20:59:20 发布

阅读量66

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Ayyy_/article/details/130305137

版权

这是一个使用HTML和CSS构建的响应式用户注册页面，通过JavaScript和jQuery实现表单验证和数据提交。当窗口尺寸变化或横屏切换时，页面会自动调整字体大小。用户点击注册按钮后，信息通过AJAX异步发送到服务器进行处理，成功则跳转到成功页面，失败则显示错误信息。

摘要由CSDN通过智能技术生成

<!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">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>王安妮-202031050293-实验5</title>
    <script type="text/javascript">
        function setRootFontSize() {
            var rootHtml = document.documentElement;
            var rem = rootHtml.clientWidth / (1080 / 100);   //1080为设计图px宽度
            rootHtml.style.fontSize = rem + "px";
        }
        setRootFontSize();   //网页首次载入时执行一次
        window.addEventListener("resize", setRootFontSize, false);   //网页大小改变时执行
        window.addEventListener("orientationchange", setRootFontSize, false);   //横屏切换时执行
    </script>
    <script src="js/jquery-3.1.1.min.js"></script>
    <!-- 外链式 -->

    <link rel="stylesheet" href="maincss.css">
    <script>
        $(document).ready(function () {
            $("#regist").click(function () {
                // 验证输入
                var errMSG = "";
                // 检查用户名是否为空
                if ($("#user").val() == "") {
                    errMSG = "用户名不能为空";

                }
                else if ($("#user").val() == " ") {
                    errMSG = "用户名不符合规范";

                }
                else if ($("#phone").val() == "") {
                    errMSG = "手机号不能为空";
                }
                else if ($("#password").val() == "") {
                    errMSG = "密码不能为空";

                }
                // 未通过验证
                if (errMSG != "") {
                    $("#errorArea").css("display", "block");
                    $("#errorArea").text(errMSG);

                }
                // 通过验证，提交数据
                else {
                    paras = {
                        name: $("#user").val(),
                        phone: $("#phone").val(),
                        password: $("#password").val()
                    }
                    $.ajax({
                        url: "http://43.136.217.18:8081/registAsync",
                        data: paras,
                        type: "POST",
                        datatype: "json",
                        // 访问成功解析json
                        success: function (data) {
                            if (data.state == "SUC") {
                                window.location.href = "http://43.136.217.18:8081/success.html";
                            }
                            else {
                                // 显示出错信息
                                $("#errorArea").text(data.msg)
                            }

                        },
                        error: function (data) {
                            msg = "访问出错,无法连接到服务器";
                            $("#errorArea").text(msg);

                        }

                    })
                }

            })
        })
    </script>



</head>

<body>
    <!-- 头部 -->
    <div id="header">
        <div class="head_left"></div>
        <div class="head_right"></div>
        <div class="head_center">用户注册</div>
    </div>
    <!-- 内容 -->
    < id="content">
        <div class="kong"></div>
        <div class="content_left1">用户名</div>
        <div class="content_center1"><input type="text" placeholder="&nbsp;请输入用户名" class="mykk" id="user"
                onclick="hideError()"></div>
        <div class="content_left2">手机号</div>
        <button class="content_right2" id="sent" onclick="sent()">发送验证码</button>
        <div><input type="number" placeholder="请输入验证码" id="yanzhengma" onclick="hideError()"></div>
        <div class="content_center2" onclick="hideyanzhengma()"><input type="tel" placeholder="&nbsp;请输入手机号"
                class="mykk2" id="phone" onclick="hideError()"></div>
        <div class="content_left3">密码</div>
        <div class="content_center3"><input type="password" class="mykk" id="password" onclick="hideError()"></div>
        <div class="content_left4">确认密码</div>
        <div class="content_center4"><input type="password" class="mykk" id="surepassword" onclick="hideError()"></div>
        <div id="errorArea">* 用户名不能为空</div>
        <div class="register"><input type="button" id="regist" value="注册"></div>

        <div class="id">已有账号</div>
        <div class="changenumber">更换手机号</div>
        </div>
        <!-- 底部 -->
        <div id="bottom">
            <div class="final1">首页</div>
            <div class="final3">设置</div>
            <div class="final2"></div>
        </div>


</body>

</html>