html登录模板
<!doctype html>
<html lang="en">
<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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>login</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<script src="/static/js/jquery.js"></script>
<style>
.container {
margin-top: 300px;
}
.c1 {
border: 2px solid red;
}
</style>
</head>
<body>
<!--bs中所有的均应该包裹在其中。-->
<div class="container">
<!-- row是珊栏系统的包裹容器-->
<div class="row">
<!-- col-md-x 表⽰此珊栏占据⼏个格⼦，offset-x 是偏移x格⼦-->
<div class="col-md-4 col-md-offset-4">
<!-- panel分为3个部分，heading,body,footer其中heading部分的颜⾊来⾃于panel-default的颜⾊-->
<div class="panel panel-danger">
<!-- panel-headeing是有颜⾊的，此颜⾊来⾃于panel-default-->
<div class="panel-heading"><h1>登录</h1></div>
<div class="panel-body">
<form action="" method="post" enctype="multipart/form-data">
<!--
1. form-group设置了距离上下部分div的距离，更美观。
2. 对于form-group 设置了has-feedback可以使其有背景图
-->
<div class="form-group has-feedback">
<!-- form-control 设置了边框有弧度圆⾓以及其中输⼊字体的pading以及margin,placeholder为默认的问题-->                            <input type="text" class="form-control" name="username"
placeholder="⽤户名">
<!-- 此项如果要显⽰必须在form-group的class上添加has-feedback且还要添加⼀个span-->
<!-- glyphicon是添加图⽚，form-control-feedback是指⽰这个是⼀个样式，同时设置其在右边-->
<span class="glyphicon  glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" name="password"
placeholder="密码">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="form-group">
<div class="checkbox">
<!-- 此处⽤label包裹checkbox 的原因是为了点击记住密码也能对复选框进⾏选择。-->
<label>
<input type="checkbox" name="remeber">记住密码
</label>
</div>
</div>
<!-- button的btn-block 可以占满当前珊栏⽽不⽤⾃适应。-->
<button type="submit" class="btn btn-success btn-block btn-lg">登录</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
/
/ 添加内容，0.5秒后清除内容
function clear(aa) {
学校网站免费html模板
setTimeout(function () {
aa = $(aa)
console.log('测试中')
{#console.log($('[name=username]'))#}
}, 500)
}
// 添加样式，0.5秒⾃动清除
function inpuBorder(aa) {
aa = $(aa)
aa.addClass('c1')
setTimeout(function () {
}, 500)
}
//⽤来检验⽤户名的,、
// 参数⼀：选择的标签
//参数⼆：⽤户或者密码
function checkUserPass(userPass, user) {
var a= 1;
var regex = /^[a-zA-Z][a-zA-Z0-9]{5,11}$/
var span = ateElement('span');
//判断长度
if ($(userPass).val().length < 5) {
if ($(userPass).val().length == 0) {
// span.innerText='⽤户名不能为空'
span.innerText = user + '不能为空'
console.log(span)
lor = 'red'
$(span).insertAfter($(userPass))
clear(userPass)
inpuBorder(userPass)
} else {
span.innerText = user + '长度过⼩' //模板字符串                lor = 'red'
$(span).insertAfter($(userPass))
clear(userPass)
inpuBorder(userPass)
}
} else {
//判断是否符合规则
if (!st($(userPass).val())) {
lor = 'red'
span.innerText = `⽤户输⼊错误`
$(span).insertAfter($(userPass))
clear(userPass)
inpuBorder(userPass)
}else{
a = 0
}
}
if (a===0){
return true
}
}
// 为⽤户做校验
$('[name=username]').blur(
function () {
var userPass = $(this)[0]
console.log('adsf')
res = checkUserPass(userPass, '⽤户名')
console.log(res)
}
)
//密码做校验
$('[name=password]').blur(
function (){
var userPass = $(this)[0]
res = checkUserPass(userPass,'密码')
console.log(res)
}
)
/* $('[name=username]').blur(function (){
var userPass = $(this)[0]
var span = ateElement('span')
if ( $(userPass).val().length <5){
if ($(userPass).val().length==0){
span.innerText='⽤户名不能为空'
lor='red'
$(span).insertAfter(this)
clear(userPass)
inpuBorder(userPass)
}
else{
span.innerText='⽤户名长度过⼩'
lor='red'
$(span).insertAfter(this)
clear(userPass)
inpuBorder(userPass)
}
}
//checkUserPass(userPass,'⽤户名')        //添加内容
if(!st($(userPass).val())){
lor='red'
span.innerText='⽤户名输⼊错误'            $(span).insertAfter(this)
clear(userPass)
inpuBorder(userPass)
}
/
*
else if($(this).val().length==0){
lor='green'
span.innerText='⽤户输⼊为空'            $(span).insertAfter(this)
}
*/
//}) */
</script>
</body>
</html>

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