<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>BootStrap</title>
//需要搭建Bootstrap框架环境：
<link href="../css/bootstrap.css" rel="stylesheet"/>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script type="text/javascript">
//f1,f2已经进行了非空判断
function checkPss1AndPass2(f1,f2){
//如果两者都不为空
if(f1&&f2){
var password = document.getElementById("password");
var repassword = document.getElementById("repassword");
var repasswordMsg = document.getElementById("repasswordMsg");
var repasswordDiv = document.getElementById("repasswordDiv");
if(password==repassword){ //两个密码相等
repasswordDiv.className = "form-group"; //form-group是进行值覆盖
return true;
}else{
repasswordDiv.className += " has-error"; //has-error是进行值追加 ，前面的空格不能少噢
repasswordMsg.innerHTML = "密码不一致"; //向确认密码行回写错误信息
return false;
}
}else{
return false;
}
}
//表单校验
function checkForm(){
var flage1 = checkNotNull("username"); //校验username是否为空
var flage2 = checkNotNull("password");//校验password是否为空
var flage3 = checkNotNull("repassword");//校验确认密码行是否为空
var flage4 = checkPss1AndPass2(flage1,flage2);//进行两次输入密码的一次性校验
return flage1&&flage2&&flage3&&flage4; //当4个条件都满足，则返回true
}
//被空判断的公共方法
function checkNotNull(id){
var username = document.getElementById(id);
var usernameMsg = document.getElementById(id+"Msg");
var usernameDiv = document.getElementById(id+"Div");
var reg = /^\s*$/;
if(reg.test(username.value)){
usernameMsg.innerHTML = "此项不能为空";
usernameDiv.className+=" has-error";
return false;
}else{
usernameDiv.className = "form-group";
usernameMsg="";
return true;
}
}
</script>
</head>
<body >
<div class="container">
<div class="raw " >
<div class="col-sm-4"><img src="../imge/logo2.png"></div>
<div class="col-sm-4"><img src="../imge/header.png"></div>
<div class="col-sm-4">
<ul class="list-inline" style="margin-top:10px" > <!-- 用style表示css样式 margin-top -->
<li><a href="" class="btn btn-primary">登陆</a></li>
<li><a href="" class="btn btn-primary">注册</a></li>
<li><a href="" class="btn btn-danger">购物车</a></li>
</ul>
</div>
</div>
</div>
<!-- 导航条 -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- 汉堡按钮 -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首页</a>
</div>
<!-- 导航条主体 -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">手机数码 <span class="sr-only">(current)</span></a></li>
<li><a href="#">电脑办公</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">母婴用品</a></li>
<li><a href="#">汽车用品</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</div>
</div>
</nav>
<!-- 注册正文 -->
<div class="row" style="background-image:url(../imge/regist_bg.jpg)">
<div class="col-sm-8 col-sm-offset-2" style="border:5px solid gainsboro;background-color:white;">
<!-- 表单部分 -->
<div class="raw">
<div class="col-sm-offset-2">
<font color="#204D74" size="4">会员注册</font>
</div>
<form class="form-horizontal" onsubmit="return checkForm()">
<div id="usernameDiv" class="form-group " >
<label for="username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-8" >
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
<label for="username" class="col-sm-2 control-label" id="usernameMsg"></label>
</div>
<div class="form-group" id="passwordDiv">
<label for="password" class="col-sm-2 control-label">密码</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
<label for="username" class="col-sm-2 control-label" id="passwordMsg"></label>
</div>
<div class="form-group" id="repasswordDiv">
<label for="repassword" class="col-sm-2 control-label">确认密码</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="repassword" placeholder="请重新输入密码">
</div>
<label for="username" class="col-sm-2 control-label" id="repasswordMsg"></label>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="email" placeholder="请输入邮箱">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="name" placeholder="请输入姓名">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-danger btn-lg">注册</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<img src="../imge/footer.jpg" width="100%"/>
</div>
</div>
<div class="row">
<div class="col-xs-12 text-center">
<ul class="list-inline">
<li><a href="">联系我们</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">联系我们</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 text-center">Copyright © 2005-2020 黑马商城 版权所有 </div>
</div>
</body>
</html>
