会画

**会画（Session）跟踪是Web程序中常用的技术，用来跟踪用户的整个会话。常用的会话跟踪技术是Cookies与Session。Cookies通过在客户端记录信息确定用户信息，Session通过在服务器端记录信息确定用户信息。

Cookie
在程序中，会话跟踪是很重要的事情。理论上，一个用户的所有请求操作都应该属于同一个会话，而另一个用户的所有请求操作则应该属于另一个会话，二者不能混淆。例如，用户A在超市购买的任何商品都应该放在A的购物车内，不论是用户A什么时间购物，这都属于同一个会话的，不能放入用户B或用户C的购物车内，这不属于同一个会话。
而Web应用程序是使用HTTP协议传输数据的，HTTP协议是无状态的协议。一但数据交换完毕，客户端一服务器端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。即用户A购买了一件商品放入购物车内，当再次购买商品时服务器已经无法判断购买行为是属于用户A的会话还是用户B的会话了。要跟踪该会话，必须引入一种机制。

注意事项：

<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	//适用于不同的设备，包括手机

1.引入文件

<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="./bootstrapvalidator-master/bootstrapvalidator-master/dist/css/bootstrapValidator.min.css">

	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="./bootstrapvalidator-master/bootstrapvalidator-master/dist/js/bootstrapValidator.min.js"></script>
	//先引入文件
在这里插入代码片

2.引入文件是否引入

水平排列的表单

	<div class="container">
	<div class="row">
	<div class="col-sm-12"><h2 class="text-center">用户登录</h2></div>
	</div>
		<form id="form1" class="form-horizontal" action="logo.php" method="post">
  <div class="form-group">
    <label for="user" class="col-sm-2 control-label">用户名</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="user" name="user" placeholder="请输入用户名">
    </div>
  </div>
  <div class="form-group">
    <label for="pwd" class="col-sm-2 control-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" name="pwd" placeholder="请输入密码">
    </div>
  </div>
  
  <div class="form-group">
    <label for="yzm" class="col-sm-2 control-label">验证码</label>
    <div class="col-sm-4">
      <input type="text" class="form-control" id="yzm" name="yzm" placeholder="请输入用户名">
    </div>
    <div class="col-sm-6">
    	<img width="100" src="yzm.php" id="validcode" alt="看不清,换一张">
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary btn-lg btn-block">登录</button>
    </div>
  </div>
</form>
	</div>
在这里插入代码片

表单格式设置

在这里插入代码片
<script type="text/javascript">
     
     $(function(){
     	$('#validcode').click(function(){
     		// alert(123)
     		$(this).attr('src','yzm.php?'+Math.random());
     	})
     })
     $(function () {
        $('form').bootstrapValidator({
　　　　　　　　message: 'This value is not valid',
            　feedbackIcons: {
                　　　　　　　　valid: 'glyphicon glyphicon-ok',
                　　　　　　　　invalid: 'glyphicon glyphicon-remove',
                　　　　　　　　validating: 'glyphicon glyphicon-refresh'
            　　　　　　　　   },
            fields: {
                user: {
                    message: '请输入用户名',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                      }
                  },
                pwd: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        }
                    }
                },
                yzm: {
                    validators: {
                        notEmpty: {
                            message: '验证码不能为空'
                        }
                    }
                },
            }
        });
    });
	</script>