<!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. [转] initrd详解

    转自:http://www.cnblogs.com/leaven/archive/2010/01/07/1641324.html 在Linux操作系统中,有一项特殊的功能——初始化内存盘INITRD( ...

  2. Selenium+PhantomJS

    Selenium Selenium是一个Web的自动化测试工具,最初是为网站自动化测试而开发的,类型像我们玩游戏用的按键精灵,可以按指定的命令自动操作,不同是Selenium 可以直接运行在浏览器上, ...

  3. C++点和箭头操作符用法区别

    变量是对象的时候用“.”访问 变量是对象指针的时候用“->”访问 例: #inlclude <iostream> using namespace std; class A { pub ...

  4. Java界面编程—事件的种类

    Java处理事件相应的类和监听接口大多位于 awt 包中. 在 java.swing.event 包中有专门用于 swing 组件的事件类和监听接口. awt 事件类继承自 AWTEvent,其超类是 ...

  5. file-downloader相关问题

    2017-05-24 file-downloader框架中,如果你想用FileDownloader中的createAndStart(String url, String saveDir, String ...

  6. 【RabbitMQ】 RabbitMQ配置开机启动

    环境 系统:Linux(CentOS 7.2) Erlang环境:21.1(安装参考[Erlang]源码安装) RabbitMQ:3.7.9(安装参考[RabbitMQ] RabbitMQ安装) 配置 ...

  7. Selenium实战总结（webwiew下拉框定位）

    基于常见的两种下拉框的展示形式: 1.点击弹出下拉框: 2.鼠标移动弹出下拉框(move_to_element) 实例一[鼠标点击弹出的下拉框]: e.g百度首页的设置--高级搜索--时间: 导包: ...

  8. Java的GUI设计

    这里笔者写一些自己做GUI时候的心得,希望可以帮助需要学习的同学,函数的实现和界面设计不在同一个文件中,且涉及参数的传递 一.继承于JFrame   当遇到继承于JFrame的类的时候,可以省去建立对 ...

  9. swift - 导航设置总结加深记忆

    一.创建导航     let VC=ViewController()    let navigationC = UINavigationController(rootViewController: V ...

  10. 使用Ant发布web应用到tomcat

    使用Ant发布web应用到tomcat 来自:http://blog.csdn.net/hbcui1984/article/details/1954537 今天在公司用ant写了个部署web应用的脚本 ...