[Web]如何利用Boostrap框架搭建一个还可以的静态网站（七_子页_注册页）
文章目录
- 返回总结
- 整体效果
- 组件
- 输入框
- 代码
- 独属 js register.js
- 独属 css registerCss.css
- html register.html
返回总结
如何利用Boostrap框架搭建一个还可以的静态网站
整体效果
组件
之前写过的组件不再重复
输入框
一行整体被分为 2:2:6:2
左边是名称，右边是输入框
<div id="" class="row">
<div id="" class="form-group">
<div id="" class="col-lg-2"></div>
<label for="name" class="col-lg-2 font_register_txt">姓名</label>
<div id="" class="col-lg-6">
<input type="text" name="" id="register_name" placeholder="请输入姓名" class="form-control" />
</div>
<div id="" class="col-lg-2"></div>
</div>
</div>
利用span标签和JS占位并在相应时间之后更改html，表明是否合法
<div id="" class="row">
<div id="" class="form-group">
<div id="" class="col-lg-5"></div>
<div id="" class="col-lg-5">
<span id="register_name_tip" class="font_size_150"> </span>
</div>
<div id="" class="col-lg-2"></div>
</div>
</div>
js 响应更改
var name = $("#register_name");
var nameSpan = $("#register_name_tip");
name.change(function(){
var str = name.val();
str.toString();
var strLen = str.length;
if(strLen<2){
nameSpan.html( "用户名不能小于2个字节")
nameSpan.css({"color":"red"});
}
else if(strLen>=5){
nameSpan.html("用户名不能大于4个字节");
nameSpan.css({"color":"red"});
}
else {
nameSpan.html("用户名称合法");
nameSpan.css({"color":"green"});
}
});
代码
独属 js register.js
window.onload = function(){
var name = $("#register_name");
var nameSpan = $("#register_name_tip");
var email = $("#register_email");
var emailSpan = $("#register_email_tip");
var passwd = $("#register_passwd");
var passwdSpan =$("#register_passwd_tip");
var passwdBack = $("#register_passwdBack");
var passwdBackSpan =$("#register_passwdBack_tip");
name.change(function(){
var str = name.val();
str.toString();
var strLen = str.length;
if(strLen<2){
nameSpan.html( "用户名不能小于2个字节")
nameSpan.css({"color":"red"});
}
else if(strLen>=5){
nameSpan.html("用户名不能大于4个字节");
nameSpan.css({"color":"red"});
}
else {
nameSpan.html("用户名称合法");
nameSpan.css({"color":"green"});
}
});
email.change(function(){
var str = email.val();
str.toString();
var strLen = str.length;
alert(strLen);
if(strLen<8){
emailSpan.html( "邮箱不能小于8个字节")
emailSpan.css({"color":"red"});
}
else if(strLen>=12){
emailSpan.html("邮箱不能大于12个字节");
emailSpan.css({"color":"red"});
}
else {
emailSpan.html("邮箱长度合法");
emailSpan.css({"color":"green"});
}
});
passwd.change(function(){
var str = passwd.val();
str.toString();
var strLen = str.length;
if(strLen<6){
passwdSpan.html("密码不能小于6个字节")
passwdSpan.css({"color":"red"});
}
else if(strLen>100){
passwdSpan.html("密码不能大于100个字节");
passwdSpan.css({"color":"red"});
}
else {
passwdSpan.html("密码长度合法");
passwdSpan.css({"color":"green"});
}
});
passwdBack.change(function(){
var strBack = passwdBack.val();
var str= passwd.val();
if(str != strBack)
{
passwdBackSpan.html( "密码错误")
passwdBackSpan.css({"color":"red"});
}
else
{
passwdBackSpan.html( "密码正确")
passwdBackSpan.css({"color":"green"});
}
});
}
独属 css registerCss.css
body,html{
background: url(../img/register/register_background.jpg) no-repeat fixed top;
}
.font_register_txt{
font-size: 120%;
font-family: "黑体";
}
html register.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/indexCss1.css" />
<link rel="stylesheet" type="text/css" href="css/SmokeNote_Style.css" />
<link rel="stylesheet" type="text/css" href="css/CommonStyle.css" />
<link rel="stylesheet" type="text/css" href="css/registerCss.css" />
<link rel="stylesheet" type="text/css" href="animate.min.css" />
<link rel="stylesheet" type="text/css" href="css/HairLossGuide.css" />
<script src="js/jquery-3.4.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/CommonStyle.js"></script>
<script src="js/register.js"></script>
<title></title>
</head>
<body>
<div id="" class="AUTO-Center">
<div id="" class="container-fluid">
<div id="" class="row">
<div id="" class="col-lg-4"></div>
<div id="" class="col-lg-4">
<div id="" class="div_center_byHeight_50percent">
<form>
<div id="" class="row">
<div id="" class="center-block">
<a href="index.html"><img src="img/_Main_Tiele.png"></a>
</div>
</div>
<div id="" class="space_div_col12_height50px"></div>
<div id="" class="row">
<div id="" class="form-group">
<div id="" class="col-lg-2"></div>
<label for="name" class="col-lg-2 font_register_txt">姓名</label>
<div id="" class="col-lg-6">
<input type="text" name="" id="register_name" placeholder="请输入姓名" class="form-control" />
</div>
<div id="" class="col-lg-2"></div>
</div>
</div>
<div id="" class="row">
<div id="" class="form-group">
<div id="" class="col-lg-5"></div>
<div id="" class="col-lg-5">
<span id="register_name_tip" class="font_size_150"> </span>
</div>
<div id="" class="col-lg-2"></div>
</div>
</div>
<div id="" class="row">
<div class="form-group">
<div id="" class="col-lg-2"></div>
<label for="exampleInputEmail1" id="" class="col-lg-2 font_register_txt">邮箱地址</label>
<div id="" class="col-lg-6">
<input type="email" class="form-control" id="register_email" placeholder="请输入邮箱">
</div>
<div id="" class="col-lg-2"></div>
</div>
</div>
<div id="" class="row">
<div id="" class="form-group">
<div id="" class="col-lg-5"></div>
<div id="" class="col-lg-5">
<span id="register_email_tip" class="font_size_150"> </span>
</div>
<div id="" class="col-lg-2"></div>
</div>
</div>
<div id="" class="row">
<div class="form-group">
<div id="" class="col-lg-2"></div>
<label for="exampleInputPassword1" id="" class="col-lg-2 font_register_txt">密码</label>
<div id="" class="col-lg-6">
<input type="password" class="form-control" id="register_passwd" placeholder="请输入密码">
</div>
<div id="" class="col-lg-2"></div>
</div>
</div>
<div id="" class="row">
<div id="" class="form-group">
<div id="" class="col-lg-5"></div>
<div id="" class="col-lg-5">
<span id="register_passwd_tip" class="font_size_150"> </span>
</div>
<div id="" class="col-lg-2"></div>
</div>
</div>
<div id="" class="row">
<div class="form-group">
<div id="" class="col-lg-2"></div>
<label for="exampleInputPassword1" id="" class="col-lg-2 font_login_txt">再次确认密码</label>
<div id="" class="col-lg-6">
<input type="password" class="form-control" id="register_passwdBack" placeholder="请再次确认密码">
</div>
<div id="" class="col-lg-2"></div>
</div>
</div>
<div id="" class="row">
<div id="" class="form-group">
<div id="" class="col-lg-5"></div>
<div id="" class="col-lg-5">
<span id="register_passwdBack_tip" class="font_size_150"> </span>
</div>
<div id="" class="col-lg-2"></div>
</div>
</div>
<div id="" class="row">
<div class="form-group">
<div id="" class="col-lg-5"></div>
<div id="" class="col-lg-2">
<button type="button" class="btn btn-success btn-lg">即刻注册</button>
</div>
<div id="" class="col-lg-5"></div>
</div>
</div>
</form>
</div>
</div>
<div id="" class="col-lg-4"></div>
</div>
</div>
</div>
</body>
</html>