1-4-阶段性案例：传智书城的页面设计

axinawang

已于 2023-09-16 15:06:11 修改

阅读量3.8k

点赞数

分类专栏： javaweb 文章标签： css html javascript

于 2021-08-03 16:04:20 首次发布

本文链接：https://blog.csdn.net/daqi1983/article/details/119346399

版权

javaweb 专栏收录该内容

122 篇文章 45 订阅

订阅专栏

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.正则表达式和正则校验。

操作步骤：1.创建正则表达式对象 2.调用test方法，来判断用户输入的数据是否符合规范。

比如：

//1.创建正则表达式对象

var regx=/^1[3|5|7|8]{1}[0-9]{9}$/;

//2.调用test方法，判断手机号是否符合规范

var value="11012345679";

var flag = regx.test(value);

alert(flag)

比如:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/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.获取标记对象
    window.onload = function () {
//2.1获取输入控件的标记对象
        usernameObj = document.getElementById("usernameId");
        passwordObj = document.getElementById("passwordId");
        phoneObj = document.getElementById("phoneId");

//2.2 获取错误信息的标记对象
        usernameMsg = document.getElementById("usernameMsg");
        passwordMsg = document.getElementById("passwordMsg");
        phoneMsg = document.getElementById("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 (!regex.test(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 (!regex.test(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 = "手机号为空";
            return false;
        } else if (!regex.test(value)) {
            phoneMsg.innerHTML = "手机号不符合规范";
            return false;
        } else {
            phoneMsg.innerHTML = "";
            return true;
        }
    }
</script>
</html>