<!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) {
setTimeout(function () {
aa = $(aa)
console.log('测试中')
{#console.log($('[name=username]'))#}
aa.nextUntil('span.glyphicon').remove()
}, 500)
}
// 添加样式，0.5秒自动清除
function inpuBorder(aa) {
aa = $(aa)
aa.addClass('c1')
setTimeout(function () {
aa.removeClass('c1')
}, 500)
}
//用来检验用户名的,、
// 参数一：选择的标签
//参数二：用户或者密码
function checkUserPass(userPass, user) {
var a= 1;
var regex = /^[a-zA-Z][a-zA-Z0-9]{5,11}$/
var span = document.createElement('span');
//判断长度
if ($(userPass).val().length < 5) {
if ($(userPass).val().length == 0) {
// span.innerText='用户名不能为空'
span.innerText = user + '不能为空'
console.log(span)
span.style.color = 'red'
$(span).insertAfter($(userPass))
clear(userPass)
inpuBorder(userPass)
} else {
span.innerText = user + '长度过小' //模板字符串
span.style.color = 'red'
$(span).insertAfter($(userPass))
clear(userPass)
inpuBorder(userPass)
}
} else {
//判断是否符合规则
if (!regex.test($(userPass).val())) {
span.style.color = '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 = document.createElement('span')
if ( $(userPass).val().length <5){
if ($(userPass).val().length==0){
span.innerText='用户名不能为空'
span.style.color='red'
$(span).insertAfter(this)
clear(userPass)
inpuBorder(userPass)
}
else{
span.innerText='用户名长度过小'
span.style.color='red'
$(span).insertAfter(this)
clear(userPass)
inpuBorder(userPass)
}
}
//checkUserPass(userPass,'用户名')
//添加内容
if(!regex.test($(userPass).val())){
span.style.color='red'
span.innerText='用户名输入错误'
$(span).insertAfter(this)
clear(userPass)
inpuBorder(userPass)
}
/*
else if($(this).val().length==0){
span.style.color='green'
span.innerText='用户输入为空'
$(span).insertAfter(this)
}
*/
//}) */
</script>
</body>
</html>
浙公网安备 33010602011771号