web 实验3

最新推荐文章于 2024-07-20 18:16:53 发布

cillin9

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量213

点赞数

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/cillin9/article/details/130311111

版权

《JavaScript基础及数据验证》实验指导

一、实验目标

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

二、实验要求

掌握JavaScript的编写要求
熟悉应用浏览器进行脚本调试
JavaScript对DOM对象的操作

三、实验内容

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

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

Css盒子模型样式；

Div+css布局；

四、主要仪器设备

硬件： PC电脑

软件： Visual Studio Code/WebStorm/HBuilder

五、考核方式及要求

提交实验报告、源代码

六、实验内容和步骤

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

(1) 通过CSS默认隐藏元素直接为元素添加一个隐藏的样式即可

(2) 通过JavaScript代码隐藏/显示元素（原理：通过JavaScript修改元素的display行内样式）

隐藏元素：document.getElementById("元素ID").style.display="none";

显示元素：document.getElementById("元素ID").style.display="block";

2、规范文本框类型：用户框（type="text"），手机号框（type="tel"），密码框（type="password"），验证码框（type="number"）

更多HTML5文本框类型参见：HTML 5 <input> type 属性

3、编写源生JavaScript代码，实现以下功能：

(1) 点击“发送验证码”链接后（onClick事件），执行验证，如果验证通过，则隐藏链接并显示验证码输入框（本应先通过AJAX向服务器提交手机号申请发送短信，待服务器成功接到请求后再显示验证码输入框，这里将此AJAX过程省略掉）；如果验证不通过，则在异常信息区域显示错误信息；

(2) 点击“注册”按钮后（onClick事件），执行验证，如果验证未通过则显示异常信息区域，并显示错误信息，如果全部信息验证通过，则弹出对话框“已提交注册信息”；

(3) 文本框或密码框有文本改动后（onChange事件），检查是否有异常信息区域，有则隐藏；

(4) 手机号文本框有文本改动后（onChange事件），检查是否有验证码输入框，有则还原为“发送验证码”链接。

表1 异常信息表

动作	条件	异常信息
点击注册	用户名为空	用户名不能为空
	手机号为空	手机号不能为空
	手机号不符合规则（正则表达式验证）	手机号不正确
	密码为空	密码不能为空
	确认密码为空	确认密码不能为空
	密码和确认密码不相等	两次输入密码不一致
	验证码为空	验证码不能为空
	验证码不等于123456	验证码不正确
点击发送验证码	手机号为空	手机号不能为空
点击发送验证码	手机号不符合规则（正则表达式验证）	手机号不正确

4、注意：文本框和密码框中，文字的颜色为黑色，设计图中显示的是默认的占位符的颜色，将文本框的placeholder属性值设置为图中的文字即可看到效果。

七、布局强化练习（选做）

新增网页news.html，仿造实验2中的设计方式，按照设计图“网页设计图_列表页.jpg”设计一个新闻列表页面，具体的新闻标题和新闻图片记录在了文件“新闻列表.txt”中。

注册完成后，跳转到news.html即可，跳转的代码为：

window.location.href="news.html"

要求：

按设计图设计网页，且新闻条目可以上下滑动查看；
参考文档“使用手机调试前端网页.docx”，在手机上显示网页。

八、实验结果

1、编写实验报告：

实验报告中写上网页制作的步骤，并附上重要步骤及结果的截图。

2、提交实验结果：

序号	文件名	说明
1	main.html	手机网页文件
2	main.css	CSS样式表
2	main_config1.png
3	main_config2.png
4	main_home1.png
5	main_home2.png
6	sub_back.png
7	sub_more.png
8	实验3报告.docx	实验报告

将HTML文件、CSS文件和图片打包，与报告文件分开上传，报告文件不要压缩

html：

<!DOCTYPE html>
<html lang="en" style="font-size:200px">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <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>   
    <title>实验3</title>
    <link rel="stylesheet" href="./03.css">
    
</head>
<script>
    function init(){
            document.getElementById("errorArea").style.display="none";
    }
    function clickReg() {
        var errorArea = document.getElementById("errorArea");
        var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
        if (document.getElementById("username").value == "") {
            errorArea.style.display = "block";
            errorArea.innerText = "*用户名不能为空";
        }
        else if (document.getElementById("usernum").value == "") {
            errorArea.style.display = "block";
            errorArea.innerText = "*手机号不能为空";
        }
        else if (!myreg.test(document.getElementById("usernum").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
        }
    }
    function checkpag2() {
        var errorArea = document.getElementById("errorArea");
        var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
        if (document.getElementById("usernum").value == "") {
            errorArea.style.display = "block";
            errorArea.innerText = "*手机号不能为空";
        }
        else if (!myreg.test(document.getElementById("usernum").value)) {
            errorArea.style.display = "block";
            errorArea.innerText = "*手机号错误";
        }
    }

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


</script>
<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="area1">
        <div class="area1-left">用户名</div>
        <div class="area1-center"><input type="text" placeholder="请输入用户名" class="yonghuming" id="username" oninput="reinput()"></div>
        
    </div>
    <div id="area2">
        <div class="area2-left">手机号</div>
        <div class="area2-center"><input type="text" placeholder="请输入手机号" class="shoujihao" id="usernum" oninput="reinput()"></div>
        <div class="main_right"><input type="text" class="mykk2" id="codeText" placeholder="请输入验证码" onchange="check()"
            onClick="checkpag2()" oninput="reinput()">
        </div>
    </div>
    <div id="password">
        <div class="password-left">密码</div>
        <div class="password-center"><input type="password" class="mima" id="mimaText" oninput="reinput()"></div>
    </div>
    <div id="check_the_password">
        <div class="check_the_password-left">确认密码</div>
        <div class="check_the_password-center"><input type="password" class="querenmima" id="mimaagainText" oninput="reinput()"></div>
    </div>
    <div id="errorArea">* 用户名提交错误</div>
    <div id="zhuce"><input type="button" value="注  册" onclick="clickReg()" id="guse"></div>
    <div id="other">
        <div class="other-left">已有账号</div>
        <div class="other-right">更换手机号</div>
    </div>
    <div id="dxt">
        <div id="bottompicture">
            <div class="bottompicture-left">&nbsp;</div>
            <div class="bottompicture-right">&nbsp;</div>
        </div>
        <div id="bottomwriting">
            <div class="bottomwriting-left">首页</div>
            <div class="bottomwriting-right">设置</div>
        </div>
        <div id="supplyment">&nbsp;</div>
    </div>
</body>
</html>

css：

        body{
            margin:0px;
        }
        #header{
            background: #e66d05;
            overflow: hidden;
            position: fixed;
            top: 0rem;
            width: 100%;
        }
        .header-left{
            float: left;
            width: 1.15rem;
            height: 1.32rem;
            background-image: url("sub_back.png");
            background-repeat: no-repeat;
            background-position: 0.46rem 0.37rem;/*left top*/
            background-size: 0.55rem  0.55rem;

        }
        .header-left img{
            width: 0.58rem;
            height: 0.55rem;
        }
        .header-center{
            color: #ffffff;
            font-size: 0.58rem;
            line-height: 0.58rem;
            padding: 0.37rem 0rem 0.37rem 0rem;
            text-align: center;
            margin: 0rem 1.15rem 0rem 1.15rem;
        }
        .header-right{
            float: right;
            width: 1.15rem;
            height: 1.32rem;
            background-image: url("sub_more.png");
            background-repeat: no-repeat;
            background-position: 0.1rem 0.37rem;/*left top*/
            background-size: 0.55rem  0.55rem;
        }
        #area1{
            width: 10.80rem;
            overflow: hidden;
        }
        .area1-left{
            float: left;
            font-size: 0.47rem;
            color: #5f5f5f;
            line-height: 0.47rem;
            text-align: left;
            padding: 0.62rem 0.76rem 0.13rem 0.47rem;
            margin-top: 1.32rem;
        }
        .area1-center{
            float: left;
            width: 7.65rem;
            height: 0.6rem;
            padding: 0.63rem 0rem 0rem 0rem;
            margin-top: 1.32rem;
        }
        .yonghuming{
            float:left;
            height: 0.45rem;
            width: 7.65rem;
            font-size: 0.47rem;
            line-height: 0.47rem;
            border: 0.04rem solid #a1a1a1;
            border-top: 0rem;
            border-left: 0rem;
            border-right: 0rem;
            padding: 0rem 0rem 0.1rem 0.11rem;
            color: #a1a1a1;
        }
        #area2{
            width: 10.80rem;
            overflow: hidden;
        }
        .area2-left{
            float: left;
            font-size: 0.47rem;
            color: #5f5f5f;
            line-height: 0.47rem;
            text-align: left;
            padding: 0.42rem 0.76rem 0.13rem 0.47rem;
        }
        .area2-center{
            float: left;
            width: 4rem;
            height: 0.6rem;
            padding: 0.42rem 0rem 0rem 0rem;
        }
        .shoujihao{
            float:left;
            height: 0.45rem;
            width: 3.8rem;
            font-size: 0.47rem;
            line-height: 0.47rem;
            border: 0.04rem solid #a1a1a1;
            border-top: 0rem;
            border-left: 0rem;
            border-right: 0rem;
            padding: 0rem 0rem 0.1rem 0.11rem;
            color: #a1a1a1;
        }
        .area2-right{
            float: left;
            width: 3.5rem;
            font-size: 0.38rem;
            line-height: 0.38rem;
            color: #eb6d06;
            padding: 0.5rem 0rem 0.14rem 0.23rem;
        }
        #password{
            width: 10.80rem;
            overflow: hidden;
        }
        .password-left{
            float: left;
            font-size: 0.47rem;
            color: #5f5f5f;
            line-height: 0.47rem;
            text-align: left;
            padding: 0.42rem 0.76rem 0.13rem 0.47rem;
        }
        .password-center{
            float: left;
            width: 7.65rem;
            height: 0.6rem;
            padding: 0.42rem 0rem 0rem 0.45rem;
        }
        .mima{
            float:left;
            height: 0.45rem;
            width: 7.65rem;
            font-size: 0.47rem;
            line-height: 0.47rem;
            border: 0.04rem solid #a1a1a1;
            border-top: 0rem;
            border-left: 0rem;
            border-right: 0rem;
            padding: 0rem 0rem 0.1rem 0.11rem;
            color: #a1a1a1;
        }
        #check_the_password{
            width: 10.80rem;
            overflow: hidden;
        }
        .check_the_password-left{
            float: left;
            font-size: 0.47rem;
            color: #5f5f5f;
            line-height: 0.47rem;
            text-align: left;
            padding: 0.42rem 0.27rem 0.13rem 0.47rem;
        }
        .check_the_password-center{
            float: left;
            width: 7.65rem;
            height: 0.6rem;
            padding: 0.42rem 0rem 0rem 0rem;
        }
        .querenmima{
            float:left;
            height: 0.45rem;
            width: 7.65rem;
            font-size: 0.47rem;
            line-height: 0.47rem;
            border: 0.04rem solid #a1a1a1;
            border-top: 0rem;
            border-left: 0rem;
            border-right: 0rem;
            padding: 0rem 0rem 0.1rem 0.11rem;
            color: #a1a1a1;
        }
        #zhuce{
            font-size: 0.52rem;
            line-height: 0.52rem;
            text-align: center;
            color:#fffdff;
            background-color: #e66d05;
            padding: 0.32rem 0rem 0.28rem 0rem;
            margin: 0.68rem 0.4rem 0rem 0.40rem;
        }
        #other{
            width: 10.80rem;
            overflow: hidden;
            color: #5a5a5a;
        }
        .other-left{
            float: left;
            font-size: 0.33rem;
            padding: 0.31rem 0rem 0rem 0.48rem;
        }
        .other-right{
            float: right;
            font-size: 0.33rem;
            padding: 0.31rem 0.52rem 0rem 0rem;
        }
        #bottompicture{
            background-color: #e66d05;
            width: 10.80em;
            overflow: hidden;
            height: 0.76rem;
            
        }
        .bottompicture-left{
            float: left;
            width: 1rem;
            height: 0.76rem;
            background-image: url("main_home2.png");
            background-repeat: no-repeat;
            background-position: 0.23rem 0.16rem;
            background-size: 0.55rem  0.55rem;
            background-color: #ffffff;
            margin: 0rem 0rem 0rem 0.27rem;
        }
        .bottompicture-right{
            float: right;
            width: 0.8rem;
            height: 1rem;
            background-image: url("main_config1.png");
            background-repeat: no-repeat;
            background-position: 0.2rem 0.14rem;
            background-size: 0.55rem  0.55rem;
            margin: 0rem 0.27rem 0rem 0rem;
        }
        #bottomwriting{
            background-color: #e66d05;
            width: 10.80em;
            overflow: hidden;
        }
        .bottomwriting-left{
            float: left;
            width: 1rem;
            font-size: 0.31rem;
            line-height: 0.31rem;
            color: #e66d05;
            background-color: #ffffff;
            margin: 0rem 0rem 0rem 0.27rem;
            text-align: center;
            padding-bottom: 0.07rem;
        }
        .bottomwriting-right{
            float: right;
            color: #ffffff;
            width: 0.7rem;
            font-size: 0.31rem;
            line-height: 0.31rem;
            text-align: center;
            padding: 0rem 0.25rem 0rem 0rem;
        }
        #supplyment{
            background-color:#e66d05 ;
            height: 0.2rem;
        }
        #dxt{
            position: fixed;
            bottom: 0rem;
        }
        .mykk2{
            margin-top: 0.25rem;
            float: left;
            width: 2.75rem;
            height: 0.58rem;
            font-size: 0.25rem;
        }
        #guse {
            font-size: 0.52rem;
            background-color: #e66d05;
            color:#fffdff;
            border: 0rem;
        }
        #errorArea {
            font-size: 0.43rem;
            line-height: 0.43rem;
            color: red;
            height: 0.43rem;
            padding: 0.45rem 0rem 0rem 2.6rem;
        }

cillin9

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web 实验3

(1) 点击“发送验证码”链接后（onClick事件），执行验证，如果验证通过，则隐藏链接并显示验证码输入框（本应先通过AJAX向服务器提交手机号申请发送短信，待服务器成功接到请求后再显示验证码输入框，这里将此AJAX过程省略掉）；(2) 点击“注册”按钮后（onClick事件），执行验证，如果验证未通过则显示异常信息区域，并显示错误信息，如果全部信息验证通过，则弹出对话框“已提交注册信息”；(4) 手机号文本框有文本改动后（onChange事件），检查是否有验证码输入框，有则还原为“发送验证码”链接。
复制链接

扫一扫

web 实验3

“相关推荐”对你有帮助么？