题目:
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"
要求:
- 按设计图设计网页,且新闻条目可以上下滑动查看;
- 参考文档“使用手机调试前端网页.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>