<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>登录首页</title>
<link href="./bootstrap-3.4.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="./js/jquery.min.js"></script>
<script src="./bootstrap-3.4.1/dist/js/bootstrap.min.js"></script>
<script src="./js/bootstrapValidator.js"></script>
<style type="text/css">
.has-error .checkbox,
.has-error .checkbox-inline,
.has-error .control-label,
.has-error .help-block,
.has-error .radio,
.has-error .radio-inline,
.has-error.checkbox label,
.has-error.checkbox-inline label,
.has-error.radio label,
.has-error.radio-inline label {
color: #666;
}
body {
background-color: #eee;
/* background: url(img/4.jpg) no-repeat; */
background-size: 100%;
font-size: 16px;
}
.bjimg {
background: url(imgs/04.jpg) no-repeat center;
background-position: center 0;
background-size: cover;
margin: 0px;
}
.form {
background: rgba(255, 255, 255, 0.9);
/*背景色设置透明度*/
width: 300px;
margin: 300px 100px 200px 600px;
border-radius: 5px;
}
.form-title {
text-align: left;
}
#login_form {
display: block;
}
#register_form {
display: none;
}
.fa {
display: inline-block;
top: 27px;
position: relative;
color: #ccc;
}
input[type="text"],
input[type="password"] {
padding-left: 26px;
}
.checkbox {
padding-left: 21px;
}
.inputleft {
padding-left: 5px;
}
.h3,
h3 {
font-size: 14px;
}
.form-group {
margin-bottom: 5px;
}
.m15 {
margin-bottom: 15px;
}
.f12 {
font-size: 12px;
}
.left10 {
padding-left: 10px;
}
input[type="text"],
input[type="password"] {
padding-left: 10px;
}
@media screen and (min-width: 320px) and (max-width: 480px) {
.bjimg {
background-image: none;
background-color: #36648B;
margin: 0 auto;
text-align: center;
overflow: hidden
}
.form {
background: rgba(255, 255, 255, 0.9);
/*背景色设置透明度*/
width: 300px;
margin: 150px 20px 20px 20px;
border-radius: 5px;
}
}
</style>
</head>
<body class="bjimg">
<div class="container">
<div class="form row">
<form class="form-horizontal col-xs-offset-2 col-md-offset-2" id="login_form">
<h3 class="form-title">登录系统</h3>
<div class="col-sm-9 col-md-9 col-xs-10">
<div class="form-group">
<input class="form-control required inputleft left10" placeholder="用户名" id="username" name="username" autofocus="autofocus" maxlength="10" />
</div>
<div class="form-group">
<input class="form-control required left10" type="password" placeholder="密码" id="password" name="password" maxlength="8" />
</div>
<div class="form-group" style="display: flex;flex-direction: row;">
<label class="checkbox f12" style="line-height: 20px;">
<input type="checkbox" name="remember" value="1"/> 记录密码
</label>
<label class="checkbox f12" style="margin-left: 15px; line-height: 20px;">
<input type="checkbox" name="remember" value="1"/> 修改密码
</label>
</div>
<div class="form-group m15">
<input type="submit" class="btn btn-success pull-left" style="width: 100px; text-align: center; margin-top: 10px;margin-bottom: 10px;" value="登录 " />
</div>
</div>
</form>
</div>
</div>
<script type='text/javascript'>
var form = $('#login_form');
$(document).ready(function() {
form.bootstrapValidator({
message: '输入值不合法',
// feedbackIcons: { //提示图标
// valid: 'glyphicon glyphicon-ok',
// invalid: 'glyphicon glyphicon-remove',
// validating: 'glyphicon glyphicon-refresh'
// },
fields: {
loginname: {
message: '用户名不合法',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 2,
max: 20,
message: '请输入2到20个字符'
},
regexp: {
regexp: /^[a-zA-Z0-9_\. \u4e00-\u9fa5 ]+$/,
message: '用户名只能由字母、数字、点、下划线和汉字组成 '
}
}
},
username: {
validators: {
notEmpty: {
message: '用户名不能为空'
},
}
},
email: {
validators: {
notEmpty: {
message: 'email不能为空'
},
emailAddress: {
message: '请输入正确的邮件地址如：123@qq.com'
}
}
},
password: {
message: '以字母开头，长度在6-12之间，必须包含数字和特殊字符。',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 12,
message: '请输入6到12个字符'
},
// identical: { //相同
// field: 'password',
// message: '两次密码不一致'
// },
// different: { //不能和用户名相同
// field: 'username',
// message: '不能和用户名相同'
// },
// regexp: {
// regexp: /^[a-zA-Z][a-zA-Z0-9_]{6,12}$/,
// message: '密码以字母开头 由字母、数字、下划线和汉字组成 '
// }
}
},
phone: {
validators: {
notEmpty: {
message: '手机号码不能为空'
},
regexp: {
regexp: "^([0-9]{11})?$",
message: '手机号码格式错误'
}
}
},
address: {
validators: {
notEmpty: {
message: '地址不能为空'
},
stringLength: {
min: 8,
max: 60,
message: '请输入5到60个字符'
}
}
}
}
});
});
</script>
</body>
</html>
网友评论