<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<style>
.login{
width: 500px;
border: 1px solid #ddd;
margin: 200px auto;
padding: 10px 15px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="login">
<h4 class="text-center text-muted">宿舍登录系统</h4>
<form>
<div class="form-group has-feedback">
<div class="input-group">
<div class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</div>
<input class="form-control input" placeholder="请输入用户名" id="user"/>
<span class="glyphicon"></span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="glyphicon glyphicon-pencil"></i>
</div>
<input type="password" class="form-control input" placeholder="请输入密码" id="password" />
<span class="glyphicon"></span>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary">登录</button>
<button class="btn btn-danger">注册</button>
</div>
</form>
</div>
<script>
$("#user").focus(function(){
$(this).parents(".form-group").addClass("has-warning")
})
$("#user").blur(function(){
var oUsername = $(this).val()
if(oUsername!="Asa"|| oUsername.length==0){
$(this).parents(".form-group").removeClass("has-success").addClass("has-error").find("span").addClass("glyphicon-remove form-control-feedback").removeClass("glyphicon-ok")
}else{
$(this).parents(".form-group").removeClass("has-error").removeClass("has-warning").addClass("has-success").find("span").removeClass("glyphicon-remove").addClass("glyphicon-ok form-control-feedback")
}
})
$("#password").focus(function(){
$(this).parents(".form-group").addClass("has-warning")
})
$("#password").blur(function(){
var oUsername = $(this).val()
if(oUsername!="666666"|| oUsername.length==0){
$(this).parents(".form-group").removeClass("has-success").addClass("has-error").find("span").addClass("glyphicon-remove form-control-feedback").removeClass("glyphicon-ok")
}else{
$(this).parents(".form-group").removeClass("has-error").removeClass("has-warning").addClass("has-success").find("span").removeClass("glyphicon-remove").addClass("glyphicon-ok form-control-feedback")
}
})
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<style>
.login{
width: 500px;
border: 1px solid #ddd;
margin: 200px auto;
padding: 10px 15px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="login">
<h4 class="text-center text-muted">宿舍登录系统</h4>
<form>
<div class="form-group has-feedback">
<div class="input-group">
<div class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</div>
<input class="form-control input" placeholder="请输入用户名" id="user"/>
<span class="glyphicon"></span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="glyphicon glyphicon-pencil"></i>
</div>
<input type="password" class="form-control input" placeholder="请输入密码" id="password" />
<span class="glyphicon"></span>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary">登录</button>
<button class="btn btn-danger">注册</button>
</div>
</form>
</div>
<script>
$("#user").focus(function(){
$(this).parents(".form-group").addClass("has-warning")
})
$("#user").blur(function(){
var oUsername = $(this).val()
if(oUsername!="Asa"|| oUsername.length==0){
$(this).parents(".form-group").removeClass("has-success").addClass("has-error").find("span").addClass("glyphicon-remove form-control-feedback").removeClass("glyphicon-ok")
}else{
$(this).parents(".form-group").removeClass("has-error").removeClass("has-warning").addClass("has-success").find("span").removeClass("glyphicon-remove").addClass("glyphicon-ok form-control-feedback")
}
})
$("#password").focus(function(){
$(this).parents(".form-group").addClass("has-warning")
})
$("#password").blur(function(){
var oUsername = $(this).val()
if(oUsername!="666666"|| oUsername.length==0){
$(this).parents(".form-group").removeClass("has-success").addClass("has-error").find("span").addClass("glyphicon-remove form-control-feedback").removeClass("glyphicon-ok")
}else{
$(this).parents(".form-group").removeClass("has-error").removeClass("has-warning").addClass("has-success").find("span").removeClass("glyphicon-remove").addClass("glyphicon-ok form-control-feedback")
}
})
</script>
</body>
</html>