Web前端实验3

最新推荐文章于 2024-05-09 13:49:21 发布
最新推荐文章于 2024-05-09 13:49:21 发布
阅读量240 收藏
点赞数
文章标签： 前端 javascript ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53745727/article/details/130327699
版权
该文详细介绍了如何使用HTML5、CSS和JavaScript创建一个注册页面，包括隐藏/显示元素、文本框类型规范、事件处理（onClick,onChange）以及表单验证功能的实现。同时，还提到了布局设计和移动设备适应性调整的方法。
摘要由CSDN通过智能技术生成

题目：

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

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

<div id="元素ID" style="display:none"></div>

(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"

要求：

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

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>实验2_202031061288邓涛</title>
    <link  href="实验3_202031061288邓涛.css" rel="stylesheet" type="text/css" />
    <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);   //横屏切换时执行
        function fsyzm(){
             var yanzhengma1 = document.getElementById("yanzhengma1");
             var yanzhengma = document.getElementById("yanzhengma");
             yanzhengma.style.display = "none";
             yanzhengma1.style.display = "block";
        }
        function regist(){
            var error = document.getElementById("errorArea");
            var user = document.getElementById("user");
            var phone = document.getElementById("phone");
            var password1 = document.getElementById("password1");
            var password2 = document.getElementById("password2");
            var yanzhengma = document.getElementById("yanzhengma1");
            if(user.value == ""){
                error.innerText = "* 用户名不能为空";
                error.style.display = "block";
            }
            else if(phone.value == ""){
                error.innerText = "* 手机号不能为空";
                error.style.display = "block";
            }
            else if(phone.value.includes("!","@","`","~","#","$","%","^","&","*","(",")","?",">","'",":","{","}","\\","|")){
                error.innerText = "* 手机号不正确";
                error.style.display = "block";
            }
            else if(password1.value == ""){
                error.innerText = "* 密码不能为空";
                error.style.display = "block";
            }
            else if(password2.value == ""){
                error.innerText = "* 确认密码不能为空";
                error.style.display = "block";
            }
            else if(password1.value != password2.value){
                error.innerText = "* 两次输入密码不一致";
                error.style.display = "block";
            }
            else if(yanzhengma1.value == ""){
                error.innerText = "* 验证码不能为空";
                error.style.display = "block";
            }
            else if(yanzhengma1.value != 123456){
                error.innerText = "* 验证码不正确";
                error.style.display = "block";
            }
            else{
                error.innerText = "已提交注册信息";
                error.style.display = "block";
            }
        }

        function hideError(){
            var error = document.getElementById("errorArea");
            error.style.display = "none";
        }

        function is_change(){
            var error = document.getElementById("errorArea");
            if(error.style.display != "none"){
                error.style.display = "none";
            }
        }
        function sjh_change(){
            var yanzhengma1 = document.getElementById("yanzhengma1");
            var yanzhengma = document.getElementById("yanzhengma");
            if(yanzhengma1.style.display == "block"){
                yanzhengma.style.display = "block";
                yanzhengma1.style.display = "none";
            }
        }
    </script>
</head>
<body>
    <!--头部区域-->
    <div id="header">
        <div class="head_left"></div>
        <div class="head_right"></div>
        <div class="head_title">用户注册</div>
    </div>
    <!--正文区域-->
    <div id="contentArea">
        <div class="content1_left">用户名</div>
        <div class="content1_center"><input class="input1" type="text" id="user" placeholder="请输入用户名" onclick="hideError()" onchange="is_change()"></div>
        <div class="content1_left">手机号</div>
        <div class="content1_right"><input type="tel" id="yanzhengma" value="发送验证码" onclick="fsyzm()"><input class="input3" type="tel"  id="yanzhengma1" placeholder="请输入验证码" onclick="hideError()" onchange="sjh_change()"></div>
<!--        <div class="content1_right"><input class="input3" type="tel"  id="yanzhengma1" placeholder="请输入验证码" onclick="hideError()" onchange="sjh_change()"></div>-->
        <div class="content1_center1"><input class="input2" type="tel" id="phone" placeholder="请输入手机号" onclick="hideError()" onchange="sjh_change()"></div>
        <div class="content1_left">密码</div>
        <div class="content1_center"><input class="input1" type="password" id="password1" onclick="hideError()"></div>
        <div class="content1_left">确认密码</div>
        <div class="content1_center"><input class="input1" type="password" id="password2" onclick="hideError()" ></div>
    </div>
    <div id="errorArea">* 用户名不能为空</div>
    <!--尾部区域-->
    <div id="tailArea">
<!--        <div class="tail_title" onclick="regist()">注   册</div>-->
        <input type="button" id="loginBtn" value="注   册" onclick="regist()">
    </div>
    <div id="tailArea1">
        <div class="tail_left">已有账号</div>
        <div class="tail_right">更换手机号</div>
    </div>
    <div id="tailArea2">
        <div class="tail_title1_left">首页</div>
        <div class="tail_title1_left2">设置</div>
        <div class="tail_title1_left1">首页</div>
    </div>
</body>
</html>

仰望神
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Web前端基础】实验9 表单页面设计
Lailalalala的博客
07-30 8999
构建基础页面：参会注册表、设计建言页面、设计调查问卷
Web开发及人机交互导论 实验四 表单
上山打老虎的博客
07-05 2010
实验四一、实验目的二、实验环境三、实验步骤项目一：留言板设计——“中国科学技术协会科技工作者建言”（一）form标记：（二）table标记：（三）style标记：（四）表单元素：（五）结尾处：（六）代码及网页展示效果：项目二：大学生暑期社会实践调查问卷（一）图层div标记：（二）表单form标记：（三）表格table标记：（四）样式style标记（五）表单元素（六）代码及网页展示效果：四、结果与分析五、心得体会 一、实验目的 理解表单的概念,熟练掌握表单创建方法。 掌握表单相关属性设置。 掌握表单输人、多
组件库实战 教你如何设计Web世界中的表单验证_web程序设计表单验证怎么做(2)
最新发布
2401_84247760的博客
05-09 702
还有兄弟不知道网络安全面试可以提前刷题吗？费时一周整理的160+网络安全面试题，金九银十，做网络安全面试里的显眼包！王岚嵚工程师面试题（附答案），只能帮兄弟们到这儿了！如果你能答对70%，找一个安全工作，问题不大。对于有1-3年工作经验，想要跳槽的朋友来说，也是很好的温习资料！【完整版领取方式在文末！！内容实在太多，不一一截图了。
Web前端开发技术实验与实践（第3版）储久良编著实训7
weixin_45867761的博客
11-22 1万+
实训7 表单页面设计 项目20 设计科技工作者建言页面 项目21 设计大学生暑期社会实践调查问卷页面
【Web开发及人机交互导论】表单
Alex_SCY的博客
05-17 1197
代码：Github仓库地址 一、实验目的 理解表单的概念，熟练掌握表单创建方法。 掌握表单相关属性设置。 掌握表单输入、多行输入、列表框等对象属性的设置。 学会使用域和域标题来分组表单元素。 学会设计用户登录、用户注册、网上调查问卷等类似页面。 二、实验环境 Windows10 HBuilderX 三、实验步骤 项目1 留言板设计——“中国科学技术协会科技工作者建言” 根据排版要求首先编写HTML5文字部分 注意：在div2中第一行，倒数第二行添加属性colspan=“2”，设置为一行一格 .
留言板的简单制作（html+css+javaScript)
Achen2282751920的博客
08-21 3177
使用一个js选择器的封装方法。
web前端开发设计-----------精美留言板
m0_75031232的博客
06-15 1万+
利用javascript设计精美留言板，很详细。
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
12-08
本文实例讲述了js实现文本框中输入文字页面中div层同步获取文本框内容的方法。分享给大家供大家参考。具体实现方法如下： 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=g
html5,web前端实验3
12-22
在实验3的文件中，我们可以期待看到这些概念的实际应用和代码示例。通过对这些基础知识的理解和实践，你可以更深入地掌握HTML5在构建现代Web前端项目中的核心能力。无论是在创建动态画廊还是构建用户友好的导航结构...
html5，web前端实验
12-22
这个"html5，web前端实验"的项目着重于实践HTML5在创建网页时的应用，特别是关于表格、新闻页面排版和使用div进行页面布局的技巧。 首先，让我们详细探讨HTML5中的表格。在HTML4中，表格主要用于数据展示，而在...
html5 web前端实验11
12-22
(1) 检查卡号合法性，出错信息如果1-11-3 卡号规则：长度为10的数字。 图1-11-3 卡号有效性检查页面 (2)检查口令合法性，出错信息如图1-11-4所示。 口令规则：长度不能小于8位或大于15位 图1-11-4 口令有效性...
Web前端开发技术-综合案例（简易留言板）.pptx
07-07
综合案例（简易留言板）;综合案例;综合案例;综合案例;节点和节点的操作;综合案例;删除留言功能：首先在添加li时，给li中增加一个a链接，给所有的a链接注册单击事件，找到a的父节点li，进行删除即可。;综合案例;综合案例;;
html5，web前端实验五
12-22
在这个“Web前端实验五”中，我们将深入探讨如何利用HTML5来创建下拉导航菜单，以及如何有效地使用div标签进行页面布局。 下拉导航菜单在网站设计中扮演着至关重要的角色，它能帮助用户快速地访问网站的各个部分。...
简大学生网页设计作业——静态HTML留言表单页面网站模板 大学生个人主页网页
而风不止
12-22 864
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
2019年8月3日暑假训练
qq_44788119的博客
08-03 239
今天看了javaweb，首先我先介绍一下 什么是web。web是一种典型的分布式结构，应用中的信息转换与传输都会涉及客户端和服务器 端。因此web开发技术分为客户端开发技术和服务器端开发技术两大类。web前端（客户端）主要任务是信息内容的呈现和用户界面的UI设计。开发技术有HTML，CSS，JavaScript等。 HTML的基本用法： HTML文档结构： <!-- 程序名称：edu...
组件库实战 | 教你如何设计Web世界中的表单验证
moandaylab
09-19 762
教你如何设计Web世界中的表单验证序言一、验证输入框ValidateInput1. 设计稿抢先知2. 简单的实现3. 抽象验证规则4. v-model5. 使用$attrs支持默认属性二、验证表单ValidateForm1. 组件需求分析2. 使用插槽 slot3. 父子组件通讯四、结束语 往期推荐 序言 在实际开发中，我们有一个很经常开发的场景，那就是登录注册。登录注册实际上涉及到的内容是表单验证，因此呢，表单验证也是 web 世界中一个很重
Javaweb实现简易的留言板项目
热门推荐
八归少年
01-13 3万+
此项目使用Eclipse+mysql 5.0+Tomcat v7.0开发，实现的主要功能有增加留言，查询留言。附加用户的登录和注册。修改、删除和回复留言还未设计，望大家补充。 此留言板为Javaweb基础练习项目，供Javaweb入门者参考学习，共同进步。 一、JavaBean层的设计 ...
三、设计留言板功能
lyzkks的博客
03-04 1万+
项目目录结构 自动生成的目录 在项目创建好后，django会自动生成一些必要的目录和文件，正确情况下的目录结构应该如下图： 如果不是这样的结构可能的情况是：django版本不对或这不是django项目。 其中的一些文件和目录的功能如下： setting.py：项目全局配置文件 urls.py：urls的配置入口 wsgi.py：django启动需要的文件 temp...
HTML与Web前端开发工具基础实验全指南
《HTML实验指导书》是一份针对初学者设计的基础性与综合性实验教材，旨在帮助学习者深入理解和掌握Web前端技术基础。这份教程共分为两部分，涵盖了HTML、CSS和JavaScript的核心内容，以及相关工具的使用。 在第一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值