1-4-阶段性案例：传智书城的页⾯设计1.传智书城的⾸页设计
通过div+css完成页⾯布局。
⾃⼰通过div+css完成⼀个简单的页⾯布局：
<head>
<title>insert title here</title>
<style type="text/css">
#header {
background-color: black;
color: white;
padding: 50px;
text-align: center;
}
#left {
background-color: gray;
line-height: 100px;
height: 400px;
width: 100px;
padding: 5px;
float: left;
}
#right {
color: red;
font-size: 20px;
text-align: center;
padding: 5px;
float: left;
}
#footer {
background-color: black;
color: white;
text-align: center;
padding: 5px;
clear: both;
}
</style>
</head>
<body>
<div id="header">导航菜单</div>
<div id="left">
商品分类1<br/> 商品分类2<br/>
</div>
<div id="right">商品详细信息</div>
<div id="footer">版权信息</div>
</body>
2.传智书城的注册页⾯设计：
1.表单校验：
⽤户数据符合咱们定义的规范，允许⽤户提交表单，如果⽤户数据不符合规范，不允许提交。
表单校验的知识点总结：1.<span>错误信息</span>：在同⼀⾏显⽰，⽤它的innerHTML属性回显错误信息。
2.事件：
onkeyup 键盘松开，调⽤对应的函数
onsubmit 提交事件（<input type="submit"> 提交按钮），调⽤对应的函数
3.正则表达式和正则校验。
html中提交表单用什么属性
操作步骤：1.创建正则表达式对象 2.调⽤test⽅法，来判断⽤户输⼊的数据是否符合规范。
⽐如：
//1.创建正则表达式对象
var regx=/^1[3|5|7|8]{1}[0-9]{9}$/;
//2.调⽤test⽅法，判断⼿机号是否符合规范
var value="11012345679";
var flag = st(value);
alert(flag)
⽐如:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">
<html>
<head>
<title> 表单校验 </title>
</head>
<body>
<h3>注册页⾯</h3>
<form action="registersuccess.html" method="get" onsubmit="return checkForm();">
⽤户名：<input type="text" name="username" id="usernameId" onkeyup="checkName();"/>
<span id="usernameMsg"></span><br/><br/>
密码： <input type="password" name="password" id="passwordId" onkeyup="checkPassword();"/>
<span id="passwordMsg"></span><br/><br/>
⼿机号：<input type="text" name="phone" id="phoneId" onkeyup="checkPhone();"/>
<span id="phoneMsg"></span><br/><br/>
<input type="submit" value="注册"/>
</form>
</body>
<script type="text/javascript">
/*表单校验*/
//1.定义全局变量⽤来接收标记对象
var usernameObj;
var passwordObj;
var phoneObj;
var usernameMsg;
var passwordMsg;
var phoneMsg;
//2.获取标记对象
//2.1获取输⼊控件的标记对象
usernameObj = ElementById("usernameId");
passwordObj = ElementById("passwordId");
phoneObj = ElementById("phoneId");
phoneObj = ElementById("phoneId");
//2.2 获取错误信息的标记对象
usernameMsg = ElementById("usernameMsg");
passwordMsg = ElementById("passwordMsg");
phoneMsg = ElementById("phoneMsg");
}
/
/表单校验，通过返回true或者flase 来控制表单是否提交。
function checkForm() {
var usernameFlag = checkName();
var passwordFlag = checkPassword();
var phoneFlag = checkPhone();
return usernameFlag && passwordFlag && phoneFlag;
}
//3.校验⽤户名
function checkName() {
//3.1获取⽤户名
var value = usernameObj.value;
/
/3.2 创建正则表达式来校验⽤户名
var regex = /^[a-zA-Z]\w{3,6}$/; // ⽤户名以不分⼤⼩写的字母开始，包含字母、数字、下划线，长度4-7位
//3.3 校验
if (value == "") { // !value 等同于 value==""
usernameMsg.innerHTML = "⽤户名必须填写";
return false;
} else if (!st(value)) {
usernameMsg.innerHTML = "⽤户名必须以字母开始，不区分⼤⼩写，包含数字、字母、下划线，长度4-7位";            return false;
} else {
usernameMsg.innerHTML = "";
return true;
}
}
// 4.校验密码
function checkPassword() {
//4.1 获取⽤户输⼊的密码
var value = passwordObj.value;
//4.2 创建正则表达式
var regex = /^[a-zA-Z0-9]{3,6}$/;//密码是字母和数字组成，长度是3-6位
//4.3 校验
if (!value) {
passwordMsg.innerHTML = "|密码不能为空";
return false;
} else if (!st(value)) {
passwordMsg.innerHTML = "密码是字母和数字组成，长度是3-6位";
return false;
} else {
passwordMsg.innerHTML = "";
return true;
}
}
// 5.校验⼿机号
function checkPhone() {
//5.1 获取⼿机号
var value = phoneObj.value;
//4.2 创建正则表达式
var regex = /^1[3|5|7|8][0-9]{9}$/;//⼿机号开始1，第⼆位是3，或者5，或者7，或者8，后⾯9位任意写
//4.3 校验
if (!value) {
phoneMsg.innerHTML = "⼿机号为空";
phoneMsg.innerHTML = "⼿机号为空";
return false;
} else if (!st(value)) {
phoneMsg.innerHTML = "⼿机号不符合规范";            return false;
} else {
phoneMsg.innerHTML = "";
return true;
}
}
</script>
</html>
3.完成我的账户页⾯设计

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。