<!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>

bootstrap2.2登录验证的更多相关文章

  1. ASP.NET MVC 登录验证

     好久没写随笔了,这段时间没 什么事情,领导 一直没安排任务,索性 一直在研究代码,说实在的,这个登录都 搞得我云里雾里的,所以这次我可能也讲得不是 特别清楚,但是 我尽力把我知道的讲出来,顺便也对自 ...

  2. Shiro安全框架入门篇（登录验证实例详解与源码）

    转载自http://blog.csdn.net/u013142781 一.Shiro框架简单介绍 Apache Shiro是Java的一个安全框架,旨在简化身份验证和授权.Shiro在JavaSE和J ...

  3. 练习：python 操作Mysql 实现登录验证 用户权限管理

    python 操作Mysql 实现登录验证 用户权限管理

  4. AD域登录验证

    AD域登录验证 作者:Grey 原文地址:http://www.cnblogs.com/greyzeng/p/5799699.html 需求 系统在登录的时候,需要根据用户名和密码验证连接域服务器进行 ...

  5. ASP.NET MVC4 Forms 登录验证

    Web.config配置: 在<system.web>节下: <authentication mode="Forms"> <forms loginUr ...

  6. MVC前台页面做登录验证

    最近接触了一个电商平台的前台页面,需要做一个登录验证,具体情况是:当用户想要看自己的订单.积分等等信息,就需要用户登录之后才能查询,那么在MVC项目中我们应该怎么做这个前台的验证呢? 1.我在Cont ...

  7. [MVC学习笔记]5.使用Controller来代替Filter完成登录验证（Session校验）

          之前的学习中,在对Session校验完成登录验证时,通常使用Filter来处理,方法类似与前文的错误日志过滤,即新建Filter类继承ActionFilterAttribute类,重写On ...

  8. ThinkPHP之登录验证

    验证方面写的不是很完整,正在完善当中 <?php /** * Created by dreamcms. * User: Administrator * Date: 2016/9/5 * Time ...

  9. ASP.NET MVC3 实现用户登录验证

    自定义一个授权筛选器类,继承于AuthorizeAttribute: using System; using System.Web; using System.Web.Mvc; namespace M ...

随机推荐

  1. 团队作业之Rookie also want to fly

    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 在时代的浪潮下,单人编程,结对编程已经无法满 ...

  2. HTML&&css练习

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. execute() 和 sumbit() 的区别

    execute()内部实现 1.首次通过workCountof()获知当前线程池中的线程数, 如果小于corePoolSize, 就通过addWorker()创建线程并执行该任务: 否则,将该任务放入 ...

  4. UEFI、BIOS、Secure Boot的关系和知识介绍

      从Windows 8操作系统时代开始,安装操作系统的方法也有了很大的改变,Windows 8采用了Secure Boot引导启动的方式,而不是过去Win XP和Win 7的Legacy启动方式,从 ...

  5. Spring MVC 数据绑定和表单标签库

    数据绑定是将用户输入绑定到领域模型的一种特性.作用是将 POJO 对象的属性值与表单组件的内容绑定. 数据绑定的好处: 1. 类型总是为 String 的 HTTP 请求参数,可用于填充不同类型的对象 ...

  6. 使用iTEXT库生成pdf

    iTEXT下载地址 https://sourceforge.net/projects/itext/files/ 选择绿色的按钮,下载最新版本,解压后是一些jar包 为了使用方便,将文件夹放到JAVA_ ...

  7. DB2 sql报错后查证原因与解决问题的方法

    1.对于执行中的报错,可以在db2命令行下运行命令 : db2=>? SQLxxx 查看对应的报错原因及解决方法. 2.错误SQL0206N SQLSTATE=42703  检测到一个未定义的列 ...

  8. 视频基础知识：浅谈视频会议中H.264编码标准的技术发展

    浅谈视频会议中H.264编码标准的技术发展 浅谈视频会议中H.264编码标准的技术发展 数字视频技术广泛应用于通信.计算机.广播电视等领域,带来了会议电视.可视电话及数字电视.媒体存储等一系列应用,促 ...

  9. 过河卒(NOIP2002)

    题目链接:过河卒 直接模拟?会T掉60分. 所以我们可以采用递推,怎么想到的? 因为卒子只能向下或向右走,所以走到一个点的方法数,等于走到它上面点的方法数加上走到它左边点的方法数,这样就可以地推了. ...

  10. linux_关闭防火墙

    centos6版本 永久关闭 chkconfig iptables off 查看状态 chkconfig iptables --list 此时关闭开机重新启动 service iptables sto ...