javascript登录注册界面Bootstrap⽤户登录界⾯的实现（BootStrap⼊门2）
Bootstrap⽤户登录界⾯的实现（BootStrap⼊门2）
源码：
第⼀部分：login.html
<!DOCTYPE html>
<html>
<headlang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet"href="bootstrap3/css/bootstrap-theme.min.css">
<link rel="stylesheet"href="bootstrap3/css/bootstrap.min.css">
<scriptsrc="bootstrap3/js/jquery-3.2.1.min.js"></script>
<scriptsrc="bootstrap3/js/bootstrap.min.js"></script>
<script type="text/javascript"src="js/jquery.validate.min.js" ></script>
<script type="text/javascript"src="js/messages.js" ></script>
<script type="text/javascript"src="js/check.js"></script>
<style>
body{background: url(images/00.jpg)no-repeat;background-size:cover;font-size: 16px;}
.form{
background: rgba(255,255,255,0.4);
padding: 20px;
padding-left: 40px;
padding-right: 40px;
}
</style>
</head>
<body>
<div class="container">
<form class="col-sm-offset-4col-sm-4 col-sm-offset-4 form form-horizontal " action="#"method="post" id="login_form">
<h3 class="text-center">⽤户登录</h3>
<divclass="form-group">
<label for="username"class="col-sm-2 control-label">账 ；号</label>
<divclass="col-sm-10">
<inputtype="text" class="form-control" id="username"name="username" placeholder="请输⼊⽤户名">
</div>
</div>
<divclass="form-group">
<label for="password"class="col-sm-2 control-label">密 ；码</label>
<div class="col-sm-10">
<inputtype="password" class="form-control"id="password" name="password" placeholder="请输⼊密码">
</div>
</div>
<button type="submit"class="btn btn-success center-block">登录</button>
<divclass="text-right">
<a href="#" >注册新账号</a>
</div>
</form>
</div>
</body>
</html>
第⼆部分：check.js
$().ready(function() {
$("#login_form").validate({
rules: {
username: "required",
password: {
required: true,
minlength: 5
}
},
messages: {
username: "请输⼊姓名",
password: {
required: "请输⼊密码",
minlength: jQuery.format("密码不能⼩于{0}个字 符")            }
}
});
});
运⾏结果：
本内容由安康学院"⾬季"原创！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。