实验三javascripy

  • 实验目的

本实验目标为,掌握JavaScript的基本用法、调试、页面元素操作以及页面数据验证的验证。支撑专业核心能力的培养。

  • 实验内容

    CSS内联样式、嵌入样式、外部样式定义与使用;

通用选择器、类型选择器、类选择器、Id选择器的使用;

Css盒子模型样式;

Div+css布局;

修改实验2布局,在注册按钮上方增加一个异常信息区域(将样式置为隐藏display: none),在发送验证码链接位置处增加一个验证码输入框(将样式置为隐藏display: none);异常区域和验证码输入框布局的设计在“网页设计图.jpg”中。

  <script>
        function init() {
            document.getElementById("errorArea").style.display = "none"

        }
        function checkpag() {
            var errorArea = document.getElementById("errorArea");
            var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (document.getElementById("userText").value == "") {

                errorArea.style.display = "block";
                errorArea.innerText = "*用户名不能为空";
            }
            else if (document.getElementById("phoneText").value == "") {
                errorArea.style.display = "block";
                errorArea.innerText = "*手机号不能为空";
            }
            else if (!myreg.test(document.getElementById("phoneText").value)) {
                errorArea.style.display = "block";
                errorArea.innerText = "*手机号错误";
            }
            else if (document.getElementById("codeText").value == "") {
                errorArea.style.display = "block";
                errorArea.innerText = "*验证码不能为空";
            }
            else if (document.getElementById("codeText").value != "123456") {
                errorArea.style.display = "block";
                errorArea.innerText = "*验证码不正确";
            }
            else if (document.getElementById("mimaText").value == "") {
                errorArea.style.display = "block";
                errorArea.innerText = "*密码不能为空";
            }
            else if (document.getElementById("mimaagainText").value == "") {
                errorArea.style.display = "block";
                errorArea.innerText = "*确认密码不能为空";
            }
            else if (document.getElementById("mimaText").value != document.getElementById("mimaagainText").value) {
                errorArea.style.display = "block";
                errorArea.innerText = "*两次输入密码不一致";
            }
            else {
                errorArea.style.display = "block";
                errorArea.innerText = "*已提交注册信息";
                window.location.href = "lab3.1.html"
            }
        }
        function checkpag2() {
            var errorArea = document.getElementById("errorArea");
            var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (document.getElementById("phoneText").value == "") {
                errorArea.style.display = "block";
                errorArea.innerText = "*手机号不能为空";
            }
            else if (!myreg.test(document.getElementById("phoneText").value)) {
                errorArea.style.display = "block";
                errorArea.innerText = "*手机号错误";
            }
        }

        //出错后信息重新输入
        function reinput() {
            var errorArea = document.getElementById("errorArea");
            errorArea.style.display = "none";
        }


    </script>
</head>

<body onload="init()">
    <div id="header">
        <div class="header_left">&nbsp;</div>
        <div class="header_right">&nbsp;</div>
        <div class="header_center">用户注册</div>
    </div>
    <div id="main">
        <div class="main_left-1">用户名</div>
        <div class="main_center"><input type="text" class="mykk-1" id="userText" placeholder="请输入用户名"
                oninput="reinput()"></div>
        <div class="main_left">手机号</div>
        <div class="main_right"><input type="text" class="mykk2" id="codeText" placeholder="请输入验证码" onchange="check()"
                onClick="checkpag2()" oninput="reinput()">
        </div>
        <div class="maine_center"><input type="text" class="mykk1" id="phoneText" placeholder="请输入手机号"
                oninput="reinput()"></div>
        <div class="main_left">密码</div>
        <div class="main_center"><input type="password" class="mykk" id="mimaText" oninput="reinput()"></div>
        <div class="mainer_left">确认密码</div>
        <div class="main_center"><input type="password" class="mykk" id="mimaagainText" oninput="reinput()"></div>
        <div class="empty" id="errorArea">*用户名不能为空</div>
        <input type="button" class="main_denglv" value="注册" style="width: 100%" ; onClick="checkpag()">
        <div class="help_left">已有账号</div>
        <div class="help_right">更换手机号</div><br>
        <div id="fansaolei">
            <div id="tail">
                <div class="tail_left">&nbsp;</div>
                <div class="tail_right">&nbsp;</div>
            </div>
            <div id="tails">
                <div class="tails_left">首页</div>
                <div class="tails_right">设置</div>
            </div>
            <div id="fanlei">&nbsp;</div>
        </div>
    </div>
</body>

</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值
>